We can create Dynamic Dom elements and insert them into HTML at runtime. Hence enabling us to create HTML and insert them at will. The major commands used for this process are

createElement()
This command takes the DOM element you want to create as an Argument. Example p, div, span.. etc.

createTextNode()
This command is used to create a text string, Which can be later inserted into any DOM Element.

appendChild()
This command is used to actually push the elements into the existing DOM structure.

Creating an p tag with some text and pushing it in an existing div element


var p = document.createElement('p'); // Creates the P tag virtually
var s = document.createTextNode('This is a Text node in a P element'); // Creates a text node Virtually
p.appendChild(s); // Adds the test to the Element P
// Assuming there is a div in dom structure with id = "new"
document.getElementById('new').appendChild(p);

This will add a p tag with a text virtually into the existing div element within the DOM structure

Advertisements