This write-up will discuss the procedures of adding or deleting the HTML elements through JavaScript. We will also demonstrated the usage of appendChild() and insertBefore() methods for adding the HTML elements. Moreover, examples related to remove() and removeChild() methods for deleting the HTML elements will be provided to you. So, let’s start!
How to add HTML Elements through JavaScript using appendChild() method
The JavaScript appendChild() method is utilized for adding an HTML element as the child of the specified parent node. This method is used to move HTML elements.
Syntax of appendChild() method
Here, the parentNode is the HTML element we want to declare as a parent, whereas the childNode is the newly created HTML element that will be added to the parent node.
Example: How to add HTML Elements through JavaScript using appendChild() method
In this example, we will show you how to use the “appendChild()” method for adding the HTML elements through JavaScript. First of all, we will add a heading and a paragraph using the <h2> and <p> HTML elements:
In the next step, we will create a new <p> element “paragraph” by utilizing the “createElement()” method of the document object:
const paragraph = document.createElement("p");
At this point, we have only created a <p>; however, we have not added any text node to it. To do so, we have to create a text node:
Then, we will append the created text node “node” to our “paragraph” element, and we will find an existing element:
const element = document.getElementById("div1");
Lastly, we will append the “paragraph” element to the existing HTML “element”:
</script>
</body>
</html>
Execute the above-given program in your favorite code editor or any online coding sandbox; however, we will utilize the JSBin for this purpose:
As you can see from the below-given output, a new HTML element is added having the text content “This is new node”:
How to add HTML Elements through JavaScript using insertBefore() method
If you want to insert an HTML element as a child node before the specified node, you can invoke the “insertBefore()” JavaScript method.
Syntax of insertMethod() method
Here, the “newNode” is the newly created HTML element that you want to add, “existingNode” is the element before which you will insert your HTML element, and the “parentNode” is the HTML element that you have specified as the parent node.
Example: How to add HTML Elements through JavaScript using insertBefore() method
In the previous example, we have utilized the appendChild() method for adding the new HTML element as the last child of the parent HTML. However, you can also use the JavaScript “insertBefore()” method to add an HTML element before the specified element. The below-given example will teach you the usage of “insertBefore()” method.
Firstly, we will add a heading and some paragraphs as follows:
Next, we will create a new element “paragraph” HTML element, and then define a child text node for it:
const paragraph = document.createElement("p");
const node = document.createTextNode("This is new node.");
paragraph.appendChild(node);
const element = document.getElementById("div1");
Now, we will specify “p1” as child element, so that we can insert the created “paragraph” element before it:
Lastly, we will pass the HTML element “paragraph” and “child” element to the insertBefore() method:
</script>
</body>
</html>
Execution of the above-given program will add the “paragraph” HTML before “p1”:
How to delete HTML Elements through JavaScript using remove() method
The JavaScript “remove()” method is used for deleting the specified HTML element from the Document Object Model (DOM).
Syntax of remove() method
Here, “node” represents the HTML element you want to delete through JavaScript.
Example: How to delete HTML Elements through JavaScript using remove() method
In the below-given, we have add a heading HTML element, a paragraph <p> and a <div> element which comprises two paragraphs <p1> and <p2> as child nodes:
Next, we will add a button and attach an “onclick” event handler. According to the following code, when we will click on the “Remove Element” button, it will invoke the “myFunction()” method:
In the “myFunction()” method, firstly, we utilize the “document.getElementbyId” to find the element which we want to delete by specifying its “id”, then we will invoke the “remove()” method:
function myFunction() {
document.getElementById("p1").remove();
}
</script>
</body>
</html>
The below-given output signifies that “p1” HTML is deleted from our JavaScript program with the help of the “remove()” function:
How to delete HTML Elements through JavaScript using removeChild() method
In JavaScript, the “removeChild()” is utilized for deleting a specific child HTML node from an HTML element.
Syntax of removeChild() method
Here, the parentNode is the HTML element we have specified as a “parent” node, and ChildNode is the HTML element we want to remove from the parent element.
Example: How to delete HTML Elements through JavaScript using removeChild() method
In this example, we will try to remove the child element of our defined <div> HTML element:
To delete a child element, first of all, you have to create a “parent” HTML element and specify the HTML element acting as a parent in your JavaScript code. In our case, we have added “div1”:
const parent = document.getElementById("div1");
Next, we will define a “child” element and will get the child Element which we want to delete from the parent HTML element:
To invoke the removeChild() method, we will utilize the “parent” element and then pass the “child” element as an argument to the removeChild() method:
</script>
</body>
</html>
As you can see that the <p1> child element of the <div1> HTML element is deleted successfully:
Conclusion
To add an HTML element in your JavaScript program, you can use the appendChild() and insertBefore() method, whereas, for deleting any specific HTML element or a child HTML node, remove() and removeChild() methods are used according to your requirements. This write-up discussed how to add or delete the HTML elements through JavaScript. We have also demonstrated the usage of appendChild() and insertBefore() methods for adding the HTML elements. Moreover, examples related to remove() and removeChild() methods for deleting the HTML elements are also provided in this article.
