JavaScript HTML DOM Element
Create a new HTML element
Create a new HTML element
To add a new element to the HTML DOM, You must first create the element (element node) and then append the element to an existing element.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<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>
</body>
</html>Example analysis:
This code creates a new <p> element:
var para=document.createElement("p");
To add text to the <p> element, you must first create a text node. This code creates a text node:
var node=document.createTextNode("This is a new paragraph.");
Then you have to add the <p> element Append this text node:
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");
The following code finds an existing element Then add a new element:
element.appendChild(para);
Delete the existing HTML element
This code appends a new element to the existing element Element:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<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>
</body>
</html>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 child elements from parent elements:
parent.removeChild(child);
It would be great if you could delete an element without referencing the parent element.
But it’s a pity. The DOM needs to know the element you need to delete, and its parent element.
This is a common solution: find the child element you wish to remove and then use its parentNode property to find the parent element:
var child=document.getElementById( "p1");
child.parentNode.removeChild(child);
HTML DOM Tutorial
In the HTML DOM section of our JavaScript tutorial, you've learned:
How to change the content of HTML elements (innerHTML) How to change the style of HTML elements (CSS) How to react to HTML DOM events How to add or remove HTML elements
Next Section