JavaScript HTML DOM Elements (Nodes)
Adding and Removing Nodes (HTML Elements)
Creating New HTML Elements (Nodes)
To add a new element to the HTML DOM, first create the element (element node), then append it to an existing element.
Example:
<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>
Example Explained:
Create a new <p> element
const para = document.createElement("p");
Create a text node
const node = document.createTextNode("This is new.");
Append the text node to the <p> element:
para.appendChild(node);
Find an existing element and append the new element to it:
const element = document.getElementById("div1");
element.appendChild(para);
Creating New HTML Elements with insertBefore()
The appendChild() method appends the new element as the last child of the parent. To insert the new element before a specified child, use the insertBefore() method.
Example:
<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>
Removing Existing HTML Elements
To remove an HTML element, use the remove() method.
Example:
<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>Example Explained:
Find the element to remove:
const elmnt = document.getElementById("p1");
Execute the remove() method:
elmnt.remove();
The remove() method does not work in older browsers. Use removeChild() as an alternative.
Removing a Child Node
For browsers that do not support the remove() method, find the parent node and use removeChild().
Example:
<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>Example Explained:
- Find the parent element:
const parent = document.getElementById("div1");
- Find the child element to remove:
const child = document.getElementById("p1");
- Remove the child element from the parent:
parent.removeChild(child);
Alternatively, find the child you want to remove and use its parentNode property:
Example:
const child = document.getElementById("p1");
child.parentNode.removeChild(child);Replacing HTML Elements
To replace an element in the HTML DOM, use the replaceChild() method.
Example:
<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>
Example Explained:
- Create a new <p> element:
const para = document.createElement("p");
Create a text node:
const node = document.createTextNode("This is new.");
Append the text node to the <p> element:
para.appendChild(node);
Find the parent and the child element to replace:
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
Replace the child element with the new element:
parent.replaceChild(para, child);
