HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Adding and Removing Nodes (HTML Elements)
To add a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing element.
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>
This code creates a new <p>
element:
To add text to the <p>
element, you must create a text node first. This code creates a text node:
Then you must append the text node to the <p>
element:
Finally you must append the new element to an existing element.
This code finds an existing element:
This code appends the new element to the existing element:
The appendChild()
method in the previous example, appended the new element as
the last child of the parent.
If you don't want that you can use the insertBefore()
method:
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
To remove an HTML element, use the remove()
method:
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1");
elmnt.remove();
</script>
The HTML document contains a <div>
element with two child nodes (two <p>
elements):
Find the element you want to remove:
Then execute the remove() method on that element:
The remove()
method does not work in
older browsers, see the example below on how to use
removeChild()
instead.
For browsers that does not support the remove()
method, you have to find the
parent node to remove an element:
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>
This HTML document contains a <div>
element with two child nodes (two <p>
elements):
Find the element with id="div1"
:
Find the <p>
element with id="p1"
:
Remove the child from the parent:
Here is a common workaround: Find the child you want to remove, and use its
parentNode
property to find the parent:
To replace an element to the HTML DOM, use the replaceChild()
method:
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>