Learn How to Use JavaScript Create Element Functions

To become fully capable of manipulating DOM elements, you should be aware of the methods used to add, remove, modify, and replace nodes.

In this tutorial, you will learn all about handling nodes and JavaScript create element functions. You will understand how to use insertBefore and appendChild JavaScript methods, as well as how to replace and remove nodes. We will also show you how document.getElementById can append a new element to a parent element.

JavaScript HTML DOM Element Nodes: Main Tips

• The HTML DOM allows you to add and remove nodes through JavaScript.
• JavaScript create element action can be done when you add an element to the HTML DOM. You will have to create element JavaScript (element node) first, then append it to an element that already exists.
• There are specific methods used to create, remove, and replace node elements.

Element Nodes

JavaScript create element action is considered done when you create an element node, and then append it to an element that already exists:

var newPara = document.createElement("p");
var textNode = document.createTextNode("Unexpected text!");
newPara.appendChild(textNode);

var newElement = document.getElementById("parent");
newElement.appendChild(newPara);

Example Explained

The code example below can be used to make JavaScript create element called <div>:

var element = document.createElement("div");

In order to add some text to the newly created element, you have to create a text node:

var textNode = document.createTextNode("Unexpected text!");

Now, you can append the text to the newly created <div> element:

element.appendChild(textNode);

Then, you need to append the newly created element to the parent element. You can perform this task by using document.getElementById method:

var newElement = document.getElementById("parent");

Lastly, you need to append your new element to an existing parent element - the <div> parent:

newElement.appendChild(newPara);

Working with HTML Elements

Let's now review working with HTML documents step by step. First, we will explain how to create them. Then, we will show you how your creations can be removed or replaced. Follow the code examples to make sure you get the idea every time.

Creating

In our previous example, the method called appendChild() was used to append the new element as the last child of the parent element. JavaScript create element action can also be performed with the insertBefore() method, which is used to insert a new element above some selected one.

Take a look at the last line of code in the example below: newElement.insertBefore(newPara, newChild);.

In the parentheses, we first indicated the name of the element we want to insert (our newly created newPara), and then defined the element above which we want the new element to be inserted (newChild):

var newPara = document.createElement("p");
var textNode = document.createTextNode("Unexpected Text!");
newPara.appendChild(textNode);

var newElement = document.getElementById("parent");
var newChild = document.getElementById("child1");
newElement.insertBefore(newPara, newChild);

Removing

If you want to delete the elements created with appendChild JavaScript method, you can remove elements by using the removeChild() method:

var nodeParent = document.getElementById("parent");
var nodeChild = document.getElementById("child1");
nodeParent.removeChild(nodeChild);

The following HTML contains a single <div> element along with two child nodes, which are both <p> elements:

<div id="parent">
    <p id="child1">Text.</p>
    <p id="child2">More text.</p>
</div>

This code will find the element with the id="parent" attribute:

var nodeParent = document.getElementById("parent");

Now, this code will find the <p> element with the id="child1" attribute:

var nodeChild = document.getElementById("child1");

We can now remove the child element by using the removeChild() method on the already located parent element. In the parentheses, we pass the variable name of the child element to be removed:

nodeParent.removeChild(nodeChild);

There is another way of accomplishing the same task: first, we find the child to be removed, then use the parentNode property to find the child element's parent. Finally, we use the removeChild() method with the child to be removed passed in the parentheses:

var nodeChild = document.getElementById("child1");
nodeChild.parentNode.removeChild(nodeChild);

Replacing

You can replace elements in the HTML DOM by using the replaceChild() method.

See the last line of the example provided below: nodeParent.replaceChild(newPara, nodeChild);.

Here, we use the replaceChild() method on the parent node by passing it in the parentheses first as the new node to be inserted, and indicating the old node to be removed second:

var newPara = document.createElement("p");
var textNode = document.createTextNode("Unexpected Text!");
newPara.appendChild(textNode);

var nodeParent = document.getElementById("parent");
var nodeChild = document.getElementById("child1");
nodeParent.replaceChild(newPara, nodeChild);

JavaScript HTML DOM Element Nodes: Summary

• You can create a new node using both methods appendChild() and insertBefore().
• You can remove a node using removeChild() method.
• You can replace a node using replaceChild() method.