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

Javascript Object Oriented Programming Front End Technology

To add a new element to the HTML DOM, we have to create it first and then we need to append it to the existing element.

Steps to follow

1) First, create a div section and add some text to it using <p> tags.

2) Create an element <p> using document.createElement("p").

3) Create a text, using document.createTextNode(), so as to insert it in the above-created element("p").

4) Using appendChild() try to append the created element, along with text, to the existing div tag.

Thus a new element is created(<p>) and appended to the existing element(<div>).

Example

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.

Live Demo

<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>

Output

Tutorix

Tutorialspoint

Tutorix is the best e-learning platform

Vineeth.mariserla

Published on 19-Jul-2019 13:29:17

Previous Page Print Page