How to create an HTML element through JavaScript using createElement()

HTML is a markup language that gives structure to our web pages whereas JavaScript is a web programming language that offers interactivity with the user. Mostly, for simplicity, developers define and create elements inside HTML. However, it is not the only way to create elements and we can also create elements using the JavaScript document object method createElement() to make our webpage more dynamic. Due to the document object, we can access HTML elements.

What is createElement()?

The createElement() is a document object built-in method that has the function of dynamically creating an HTML element from and returning the newly created HTML element.

The syntax of createElement() is given below:

var creatingElement = document.createElement(HTMLTagName);

The createElement() takes one parameter HTMLTagName which is a mandatory parameter of type string and it is the tag name of an HTML element.

It should be noted that the createElement() method does create an HTML element however to attach the element to the document (webpage) we have to use the appendChild() or insertBefore() methods.

Now that we know what the createElement() method is, let us look at an example to better understand the createElement() method.

Example1:

In this example, we will create a button element from JavaScript at the click of an already existing button.

Let’s first create a button in HTML that has an onclick event attached to it.

<body>

<button onclick = "myFunc()">Magic Button</button>

<script src="code.js"></script>

</body>

Whenever a user will click on the button, it will start executing the myFunc() function. In the end, we have used the script tag and provided the source (code.js) of the JavaScript file that contains the myFunc() function.

The JavaScript code is given below:

function myFunc() {

var myBtn = document.createElement("button");

myBtn.innerHTML = "New Button";

document.body.appendChild(myBtn);

}

In the above code, first, we initialized the myFunc() function and then created a button element using the createElement() method. Then to give the button a title we used the myBtn.innerHTML property. In the end, we attached the button to the body of our HTML using the appendChild() method.

The output is given below:

We can see that whenever we click on the Magic button, it creates a new button with the title “New Button”.

Example2:

In this example, we will create an h2 tag of HTML through javascript and then attach it with the HTML body using the insertBefore() method.

For this purpose, let us first write the HTML code:

<body>

<div id="myContainer">

<p id = "para">Insert Heading above this</p>

</div>

<button onclick = "myFunc()">Magic Button</button>

<script src="code.js"></script>

</body>

The rest of the code is the same as example 1 with the exception that now we have created a div element inside which we created a <p> tag with the id “para”.

The JavaScript code is given below:

function myFunc() {

var myContainer = document.getElementById("myContainer");

var para = document.getElementById("para");

var myHeading = document.createElement("h2");

myHeading.innerHTML = "New Heading";

myContainer.insertBefore(myHeading , para);

}

Inside the function, we first get the reference of the <div> and <p> element of HTML. Then we create an <h2> element using createElement() method. To insert it before the <p> element we use the insertBefore() method where we pass the newly created <h2> tag and the <p> tag reference as parameters.

The output of the above code is given below:

Whenever we click on the Magic Button, a new element h2 is created via JavaScript’s createElement() method.

Conclusion

The document object gives us access to HTML elements and one of the built-in methods of the document objects is the createElement() method. The createElement() method is used to create an HTML element dynamically by taking the HTML tag name as its parameter and then returning the newly created HTML element. To attach the newly created HTML element to HTML we use the appendChild() or insertBefore() methods.

In this post, we saw how to create an HTML element using the createElement() method in JavaScript.

How to create an HTML element through JavaScript using createElement()

What is createElement()?

Example1:

Example2:

Conclusion

About the author

Shehroz Azam