How to create elements using JavaScript

While making a dynamic websites, manier time we need to show HTML elements on depending users action. When number of elements isn’t too large, adding static elements and depending upon users actions, showing or hiding them can be easily done. But with increasing number of HTML elements, situation gets worse and worst if you load all the elements at a time. Hence we use JavaScript to create only required elements on users’ actions.

I wonder how long our devices would get hanged if google loads all billions of search results in one single HTML page…

If you prefer video then go for it or continue with the article :)

How to create dynamic elements using JavaScript

In this article we will be creating dynamic HTML elements using JavaScript. We will be using basic HTML markup as shown in figure 1 and all elements will be created inside section with class mySection.

basic HTML markup (figure 1)

Whenever user clicks on add input button, if input isn’t empty then we are going to create a <p> elements inside section with mySection class. Hence we are moving towards our script.js

click event listener (figure 2)

As shown in figure 2, when user clicks on the button with class myButton, addInput function will get called. Now only remaining task is crating elements inside addInput function.

create <p> element (figure 3)

We are first storing input into input variable and if input’s value isn’t “” i.e. empty then we are creating an element. document.createElement(“tag_name”) creates an HTML tag tag_name. We set its innerHTML as the entered input and then we appended tag_name to mySection section as a child. Now we’ll change style of new elements. To change style use following syntax.
para.style.style_name = value

eg. para.style.color = “red”;
para.style.backgroundColor = “yellow”;

Styling is expected to be done using classes. For adding and deleting classes you can use following syntax.
para.classList = “class1 class2” will overwrite all present classes with class1 class2
para.classList.add(“class1”) will add class1 if it is not present.
para.classList.remove(“class2”) will remove class1 if it is present.

If you have created <a> element or <img> element then you would wish to add href, target, src, id etc attributes. So for those use .setAttribute method.
eg. para.setAttribute(“href”, “https://medium.com”)

In figure 4, I have used inline styling for color and added class for background-color

code with styling (figure 4)

Figure 5 shows what we have done till now.

Created synamic elements (figure 5)

Now, we have used innerHTML property to set input value but it treats input as HTML markup i.e. if you write an HTML tag then it will treat it as HTML tag only and not as a string (figure 6).

When innerHTML is used (figure 7)

Now what we can do is creating a textNode of input and append it to para. This will treat input as a string. Follow code in figure 8 to create textNode.

Creating textNode (figure 8)

And the output for same input as figure 7 will result in following output when textNode is used.

when textNode’s are used (figure 9)

You’ll have to chose between textNode and innerHTML depending upon requirement. I would suggest you to use textNode wherever possible it will be good for security as user won’t be able to execute inline script using that.

That’s it from my side. I hope, this would make creating HTML element using JavaScript a little easier :)