How to add a new element to HTML DOM in JavaScript?

Javascript Web Development Front End Technology

In this article we are going to discuss how to add a new element to HTML DOM in JavaScript.

The Document object provides a method createElement() to create an element and appendChild() method to add it to the HTML DOM. Following are the steps involved in creating HTML DOM −

Step 1 − To insert an element into HTML DOM, firstly, we need to create an element and append to HTML DOM. The document.createElement() is used to create the HTML element. The syntax to create an element is shown below.

document.createElement(tagName[, options]);

Where,

tagName is the name of the tag to be created. The tag is of <p> type.
options param is an optional element object.

Step 2 − After creation of a tag, we need to create a text to assign to the tag. The syntax to create a text node is shown below.

Document.createTextNode(“String”);

Step 3 − After creating the text, we need to add the text to the element <p> type and thus finally adding to the div tag. The syntax to append the element to a tag is shown below.

appendChild(parameter);

Example 1

In the following example, initially the div section consists of only 2 texts. But later on, one more text is created and added to the div section as shown in the output.

<html>
<body>
   <div id="new">
      <p id="p1">Tutorix</p>
      <p id="p2">Tutorialspoint</p>
   </div>
   <script>
      var tag = document.createElement("p");
      var text = document.createTextNode("Tutorix is the best e-learning platform");
      tag.appendChild(text);
      var element = document.getElementById("new");
      element.appendChild(tag);
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 2

The following is an example program on how to add an element to HTML DOM.

<!DOCTYPE html>
<html>
<body>
   <h2>JavaScript HTML DOM</h2>
   <p>How to add a new element to HTML DOM</p>
   <div id="div1">
      <p id="p1">Introduction.</p>
      <p id="p2">Conclusion.</p>
   </div>
   <script>
      const para = document.createElement("p");
      const node = document.createTextNode("The end.");
      para.appendChild(node);
      const element = document.getElementById("div1");
      const child = document.getElementById("p2");
      element.appendChild(para,child);
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 3

The following is an example program on how to add an element to HTML DOM. Here, the insertBefore method is used instead of append method to add the element to the div tag.

<!DOCTYPE html>
<html>
<body>
   <h2>JavaScript HTML DOM</h2>
   <p>How to add a new element to HTML DOM</p>
   <div id="div1">
      <p id="p1">Introduction.</p>
      <p id="p2">Conclusion.</p>
   </div>
   <script>
      const para = document.createElement("p");
      const node = document.createTextNode("To begin with...");
      para.appendChild(node);
      const element = document.getElementById("div1");
      const child = document.getElementById("p2");
      element.insertBefore(para,child);
   </script>
</body>
</html>

On executing the above code, the following output is generated.