What is the createElement() method?

In this article, we look at how to create new elements within JavaScript, how to add elements to the document and how to modify content inside. There are two steps for creating new elements on the website using script. Step one is adding a new HTML element. Although it is not visible right away, hence, step two is to take this element and push it into the HTML document where we want to display it.

What is Document Object Model

DOM is a way of communication with HTML elements on a webpage. It’s kind of an interface with all the elements displayed there as tree nodes. Using script you can add elements, modify content inside, or remove from the document. DOM allows you to see any changes within a tree of objects, i.e. nodes.

Here is a simple example of the DOM object representation based on the content of the HTML document.

<!DOCTYPE html>
<html>
 <head>
   <title>Example</title>
 </head>
 <body>
   <h1>Hello!</h1>
 </body>
</html>

Based on this HTML, the DOM tree will look like:

html

└ head

└ title -> 'Example'

└ body

└ h1 -> 'Hello!'

The createElement() method

This command allows you to dynamically add new HTML elements to the DOM using JavaScript.

Syntax:

document.createElement(tagName)

Hence, the method takes one parameter and this is a tag name of a new element. Within the brackets you need to enter a string variable (i.e. specify the type of a new element) in quotation marks. In the following example we use the document.createElement() to add a new <div> element:

const newElement = document.createElement('div');

How to add div tag on a webpage

Say, we’ve created a new element from the example above. However, when we go to the page there is no <div> tag inside of the <body>. And that’s because creating something in JavaScript is different than adding it to the webpage.

All we have done is just create some reference to the element, but now we need to assign it to the HTML document actually. To make it happen, the document.createElement() command should be used in combination with either appendChild() or insertBefore() function.

appendChild()

This function allows you to add a created element (i.e. child element) to an according parent element. The syntax is as follows:

document.parentElement.appendChild(childElement)

Using appendChild(), we can add a new element inside another. A reason for doing this is to append a new element to the HTML document. Let’s consider a simple example:

const newElement = document.createElement('div');
document.body.appendChild(div);
console.log(newElement); // <div></div>

As you can see, when we log it on a screen, this code will insert <div></div> before the closing </body> tag.

insertBefore()

This function, similarly to appendChild(), adds a new element to the specified location of the parent node. The syntax is as follows:

parentElement.insertBefore(childElement, nextSibling)

Here, childElement is an element being inserted to the parent node, nextSibling specifies the location of where the block will be inserted. The last should point out to the element before which it will go. Let’s look at the following example:

<!DOCTYPE html>
<html>
 <head>
   <title>Example</title>
 </head>
 <body>
   <div id="'div_old'">
     <p>First paragraph</p>
     <p>Second paragraph</p>
   </div>
 </body>
 <script>
   const div = document.createElement("div");
   divOld.insertBefore(div, divOld.children[1]);
 </script>
</html>

The output of this code will get a new div element inserted between first and second paragraphs respectively.

Adding id and class to the <div>

You can create an id and class to a new element while attaching it to the webpage. For this, after using the createElement() function, you also need to set the id and classes for it. Here is the way to do it:

const newElement = document.createElement('div');
newElement.id='my-id';
newElement.classList.add('my-class');
document.body.appendChild(newElement);

Adding text to the <div>

We also can add some text inside of the <div> tag. There are at least two ways you can do it. We show only the innerText() method for modifying content inside of the added element. The syntax of this command is:

element.innerText = 'Add a new text right here'

Here’s an example:

const body = document.body;
const div = document.createElement('div');
div.innerText = 'Hello, World';
body.appendChild(div);

After running this code, you will get the printed “Hello, World” text inside of the <div> tag.

What is createElement() used for

This method is useful for updating the page dynamically from a web server request in the background. When we say dynamically, we mean that there are two ways for creating new HTML elements. Firstly, you can basically write it in a certain tag.

<!DOCTYPE html>
<html>
 <head>
   <title>Create element</title>
 </head>
 <body>
   <input />
 </body>
</html>

Here, we added a new input tag as a new element to <body>. However, we can do the same using code in JavaScript for creating new elements dynamically. Like this:

<!DOCTYPE html>
<html>
 <head>
   <title>Create element</title>
 </head>
 <body></body>
 <script>
   const newElement = document.createElement("input");
   document.body.appendChild(newElement);
 </script>
</html>

From the snippet above, you can see that we added an input tag using script.