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, you must create the element (element node) first, and
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>
var
para = document.createElement("p");
var
node = document.createTextNode("This is new.");
para.appendChild(node);
var
element = document.getElementById("div1");
element.appendChild(para);
</script>
»
Example
Explained
This code
creates a new <p> element:
var para =
document.createElement("p");
To add text
to the <p> element, you must create a text node first. This code creates
a text node:
var 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:
var 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.
If you don't
want that you can 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>
var
para = document.createElement("p");
var
node = document.createTextNode("This is new.");
para.appendChild(node);
var
element = document.getElementById("div1");
var
child = document.getElementById("p1");
element.insertBefore(para,
child);
</script>
»
Removing
Existing HTML Elements
To remove an
HTML element, you must know the parent of the element:
Example
<div
id="div1">
<p
id="p1">This is a paragraph.</p>
<p
id="p2">This is another paragraph.</p>
</div>
<script>
var
parent = document.getElementById("div1");
var
child = document.getElementById("p1");
parent.removeChild(child);
</script>
»
The method
node.remove() is implemented in the DOM 4 specification.
But because
of poor browser support, you should not use it.
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":
var
parent = document.getElementById("div1");
Find
the <p> element with id="p1":
var
child = document.getElementById("p1");
Remove
the child from the parent:
parent.removeChild(child);
It would be
nice to be able to remove an element without referring to the parent.
But sorry.
The DOM needs to know both the element you want to remove, and its parent.
Here is a
common workaround: Find the child you want to remove, and use its parentNode
property to find the parent:
var child =
document.getElementById("p1");
child.parentNode.removeChild(child);
Replacing
HTML Elements
To replace
an element to 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>
var
para = document.createElement("p");
var
node = document.createTextNode("This is new.");
para.appendChild(node);
var
parent = document.getElementById("div1");
var
child = document.getElementById("p1");
parent.replaceChild(para,
child);
</script>
0 comments: