Loading Please Wait...
According to the W3C HTML DOM standard, everything in an HTML document is a node.
With JavaScript, we can add, update, and remove HTML nodes (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.
const para = document.createElement("p");
To add text to the <p> element, you must create a text node first. This code creates a text node.
const node = document.createTextNode("This is a new paragraph.");
Then you must append the text node to the <p> element.
para.appendChild(node);
Finally you must append the new element to an existing element. This code finds an existing element.
const element = document.getElementById("div1");
This code appends the new element to the existing element.
element.appendChild(para);
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).
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Find the element you want to remove.
const elmnt = document.getElementById("p1");
Then execute the remove() method on that element.
elmnt.remove();
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>
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>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved