JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
DOM Nodes
To add a new element to the HTML DOM, create the element (element node) first, and then append it to an existing element.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>
<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>
</body>
</html>
Output
JavaScript HTML DOM
Add a new HTML Element.
This is a paragraph.
This is another paragraph.
Example Explained
This code is used to create a new <p> element:
const para = document.createElement(“p”);
To add text to the <p> element, create a text node first. This code creates a text node:
const node = document.createTextNode(“This is a new paragraph.”);
Then append the text node to the <p> element:
para.appendChild(node);
Finally, 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);
Creating new HTML Elements – insertBefore()
The appendChild() method in the previous example, appended the new element as the last child of the parent.
Use the insertBefore() method:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>
<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>
</body>
</html>
Output
JavaScript HTML DOM
Add a new HTML Element.
This is new.
This is a paragraph.
This is another paragraph.
Removing Existing HTML Elements
Use the remove() method to remove an HTML Elements.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<h3>Remove an HTML Element.</h3>
<div>
<p id=”p1″>This is a paragraph.</p>
<p id=”p2″>This is another paragraph.</p>
</div>
<button onclick=”myFunction()”>Remove Element</button>
<script>
function myFunction() {
document.getElementById(“p1”).remove();
}
</script>
</body>
</html>
Output
JavaScript HTML DOM
Remove an HTML Element.
This is a paragraph.
This is another paragraph.
Example Explained
The HTML document consists of 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>
Search for the element you want to remove:
const elmnt = document.getElementById(“p1”);
Execute the remove() method on that element:
elmnt.remove();
Removing a Child Node
For browsers that do not support the remove() method, find the parent node to remove an element.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Remove Child Element</p>
<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>
</body>
</html>
Output
JavaScript HTML DOM
Remove Child Element
This is another paragraph.
Example Explained
This HTML document contains a <div> element with two child nodes (two <p> elements):
<div id=”div1″>
<p id=”p1″>This is a paragraph.</p>
<p id=”p2″>This is another paragraph.</p>
</div>
Find the element with id=”div1″:
const parent = document.getElementById(“div1”);
Find the <p> element with id=”p1″:
const child = document.getElementById(“p1”);
Remove the child from the parent:
parent.removeChild(child);
Here is a common workaround: Find the child remove, and use its parentNode property to find the parent:
const child = document.getElementById(“p1”);
child.parentNode.removeChild(child);
Replacing HTML Elements
Use the replaceChild() method to replace an element in the HTML DOM.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<h3>Replace an HTML Element.</h3>
<div id=”div1″>
<p id=”p1″>This is a paragraph.</p>
<p id=”p2″>This is a paragraph.</p>
</div>
<script>
const parent = document.getElementById(“div1”);
const child = document.getElementById(“p1”);
const para = document.createElement(“p”);
const node = document.createTextNode(“This is new.”);
para.appendChild(node);
parent.replaceChild(para,child);
</script>
</body>
</html>
Output
JavaScript HTML DOM
Replace an HTML Element.
This is a paragraph.
This is a paragraph.