If you're reading this then you must know a little bit about what HTML and Javascript is. So how exactly do you create a HTML DOM element with Javascript? It's not an easy concept to grasp as a beginner in Javascript but hopefully after reading this, you can gain a better understanding. Let's start with the basics.
What is a HTML element?
A HTML element includes everything in between the first tag to the end of the tag. For example,
<p>A paragraph</p>
Not all HTML files include tags like a paragraph tag <p></p> or an image tag <img>. Knowing how to create a HTML tag with javascript is essential if you want to add anything to the page without touching the HTML file.
How do you create a HTML DOM element with Javascript?
We will use this HTML code in reference to our code examples.
<body>
<div id='create-cat'></div>
</body>
1) Create an element by using document.createElement("x").
X represents any element you're trying to create.
For example, if you want to create the element <img>
and declare it as a variable, you will type:
let imgTag = document.createElement("img")
2) Select where you want to append the <img> tag. In this case, append it to the <div> tag. Declare it as a variable so you can reference back to it later. To do that, you will type:
let catCreation = document.querySelector("#create-cat")
3) Now, to actually append the <img> tag under the div tag, you will type:
catCreation.append(imgTag)
This will make the code on the HTML DOM look like this now:
<body>
<div id='create-cat'></div>
<img>
</body>
4) To make an image show, you will need to include the source path to the image. So, you will type the variable name you used to create the <img> tag. Enter .src after and set it equal to the image file or link. See the example below:
imgTag.src="img.cat_jpg"
Now you should see the cat image and and the HTML DOM will now look like this:
<body>
<div id='create-cat'></div>
<img src="img.cat.jpg">
</body>
Success! You have officially created a new HTML DOM element and appended it. Best of luck coding!
Cover image source: https://www.canto.com/blog/insert-image-html/
Top comments (0)