Cyber Week

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

Learn How to Use JavaScript Create Element Functions

Reading time 4 min
Published Aug 8, 2017
Updated Oct 2, 2019

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:

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

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

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

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

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

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

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

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

Example
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):

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

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

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

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

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

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

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

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

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