How to create, append, replace or remove an element in JavaScript?

JavaScript manipulates a web page as network of document objects i.e. It treats every element as an object and thus can perform all the methods or operations that are offered in DOM (Document Object Model). It can manipulate the data or structure of a web page i.e. It can create, add, or remove an element from within the hierarchical structure of a web page. In this tutorial, we'll learn how to create an element. We will practice the methods that append or remove an element.

Remember that you will encounter two types of object in DOM. One is the document and the other one is any of the elements present within this document.

1. Create a new element

We can create an element with the createElement("ul") method of the document object. See the syntax of createElement("ul") object.

document.createElement("elementName");

document represents the current document. Here is the list of html tags.

Example 1:

let ul = document.createElement("ul");

In the above-given example, createElement("ul") method creates ul element within the document object. You may create any of the HTML supported tags by passing the element to be created as argument.

2. Append an element

We have created a ul element. Now, we can append this element to other elements using appendChild(). Just get the element we want to append a child to. And then append our created node to this element.

ElementNode1.appendChild(ElementNode2);

We set ElementNode2 node as the child of ElementNode1 node.

Example 2:

// Before rendering structure
<div class="div"> 
</div>
<ul class="ul"></ul>

<script>
 let div = document.getElementsByClassName('div')[0];
 let ul = document.getElementsByClassName('ul')[0];
 div.appendChild(ul);
</script>

// After rendering structure
<div class="div"> 
  <ul class="ul"></ul>
</div> 

In the above-given example, we are appending ul as the child of div element. We may also append the element before a node. See the example below.

See how to insert a child node before some other child instead of inserting at the end of parent node as in the above-given example.

parentNode.insertBefore(beforeChildNode, childNode);

Example 3:

// Before rendering structure
<div class="div"> 
  <ul class="ul"></ul>
</div>

<script>
 let div = document.getElementsByClassName("div")[0];
 let ul = div.getElementsByClassName('ul')[0];
 let p = document.createElement('p');
 div.insertBefore(p, ul);
</script>

// After rendering structure
<div class="div"> 
  <p></p>
  <ul class="ul"></ul>
</div> 

In the above-given example, we are appending newly created p element as a child of the div element but before the ul element.

3. Replace a child node

We can replace the child nodes with the new nodes. See the syntax given below.

parentNode.replaceChild(newNode, oldNode);

There are two nodes. newNode to be placed and oldNode to be removed.

Example 4:

// Before rendering structure
<div class="div"> 
  <p class="p1">Paragraph1</p>
</div>

<p class="p2">Paragraph2</p>

<script>
 let div = document.getElementsByClassName('div')[0];
 let p1 = div.getElementsByClassName('p1')[0];
 let p2 = document.getElementsByClassName('p2')[0];
 div.replaceChild(p2, p1);
</script>

// After rendering structure
<div class="div"> 
  <p class="p2"> Paragraph2 </p>
</div> 

In the above-given example, we are replacing the p1 class element with p2 class element.

4. Remove a child node

Now, what if we want to remove an element from within the structure. We'll use removeChild() method to remove the child. See the syntax given below.

parentNode.removeChild(childNode);

It represents that we want to remove childNode from some parentNode.

// Before rendering structure
<div class="div"> 
  <ul class="ul"> </ul>
</div>

<script>
 let div = document.getElementsByClassName('div')[0];
 let ul = div.getElementsByClassName('ul')[0];
 div.removeChild(ul);
</script>

// After rendering structure
<div class="div"> 
</div> 

In the above-given example, ul is a child of the div element. We get both elements and remove the ul element from the div element.