The Dom – Creating and Adding Nodes

Now we will learn how to create element and text nodes in JavaScript, as well as how to add those nodes to an existing DOM tree.

createElement()

The createElement() method will allow you to create a new HTML element node in JavaScript, such as a <div> or <hr> element. You can make any HTML element using creatElement().

Will use <hr> as an example which creates a simple horizontal rule (line) across the page. Create element is a method of the document so you use it like this example:

document.createElement(‘hr’)

Typicallly, you will want to assign it to a variable like this:

const newEl = document.createElement(‘hr)

createTextNode()

We use the createTextNode() to create a text node. (Note for now: There are more methods to create other kinds of nodes, such as createComment to create a comment node, and so on).

const newText = document.createTextNode(‘your text goes here’);

Here is what’s important to understand about creating a new node of any kind of element, text, or otherwise. Once you created a new node, it doesn’t automatically become part of that documents DOM tree, it is just sort of floating around there in space. It does not know where to go. What to connect to. It does not know where it belongs in the DOM until you explicitly tell it. When you create a DOM node, it is not automatically added to the DOM tree structure and will not show up on the webpage.

A big classic mistake is to create a node and then not actually add it to the DOM, and wonder why it is not showing up. So, how do we add a NODE to the DOM? There are several ways to do it and will cover two for now.

Adding Nodes:

insertBefore()

inserBefore() is a node method, you must use it on an existing node. First figure out an existing node in the DOM to act as the parent node for the node to insert. We locate an existing node in the DOM using one of those methods. We created a variable to refer to that node and we give it the name parent node, then we can call the insertBefore() method. Then we give it two arguments, the first argument is the new node that you want to insert. Let’s say that we created a new element node and we put it in the variable newEL . The second argument is the node inside the parent node that you want to insert it before. This could be any child node of parent node. For our example below we will use parentNode.firstChild , which means the new node will be added before the existing first child node of the parent, thus becoming the new first child.

parentNode.insertBefore(newEL, parentNode.firstChild)

If we used used parentNode.insertBefore(newEL, parentNode.lastChild) , the new node will be inserted before the last child instead of the first child. So that’s one method.

Now one more way to add a node to an existing DOM.

appendChild()

appendChild() is another node method to add a node to an existing DOM. Again, you need to locate a node to act as the parent. In this example, it will automatically append this new node as a child of the parent node as the very last child node.

parentNode.appendChild(newText);

Now let’s look at our Demo Code for Creating and Adding Nodes on CodPen

Here is a snippet of the code from CodePen for discussion below:

<p id=”firstP” onclick=”insertNewElement()”>Click this text to insert a new hr element to the page</p>

<p id=”secondP” onclick=”insertNewText()”>Click this text to append a new text child node to the page</p>

<script>

function insertNewElement() {    //This function creates a new HR element node. 
const newEl = document.createElement(‘hr’);    //And assigns it to the variable newEL
const parentNode = document.querySelector(‘#firstP’);  //Then it uses document.querySelector to locate the existing element with the ID of firstP , and it assigns that node to the variable parent node.
parentNode.insertBefore(newEl, parentNode.firstChild);  //Then it uses the method insert before on the parent node to insert the new element newEL, the second argument says what child to add it before and were added before the parent nodes first child, so this function will create a new HR element and add it as the new first child of the paragraph element with the first p id.
}

function insertNewText() {  //This function creates a new text node.
const newText = document.createTextNode(‘ This is dynamically added text!’);  //This creates a new text node with the text inside.
const parentNode = document.getElementById(‘secondP’);  //Here we use getElementById, to get the existing element with the ID of secondP.
parentNode.appendChild(newText);  //Once we have the parent node, we use appendChild on it to append a new text. We can ujse appendChild to append any kind of node, not just text.
}

</script>

Again, look at the steps:

const newText = document.createTextNode(‘ This is dynamically added text!’);  //Create NODE
const parentNode = document.getElementById(‘secondP’);  //Add a NODE
parentNode.appendChild(newText);  //Once we have the parent node, we use appendChild on it to append a new text.

Additional Resources:

• W3Schools – HTML DOM createElement() method, HTML DOM createTextNode() method, HTML DOM insertBefore() method, HTML DOM appendChild() method
• MDN – Document.createElement(), Document.createTextNode(), Node.insertBefore(), Node.appendChild()