HTML DOM Element

HTML DOM Element (elements)
The document itself is a document node.
All HTML elements are element nodes.
All HTML attributes are attribute nodes
Text within an HTML element is a text node.
A comment is a comment node.

The usage of node

1. If you want to add a new element to the HTML DOM, you must first create the element and append it to the existing element.
Create a new HTML element using AppendChild ()

AppendChild () Examples are as follows:

<div id= "Div1" >
<p id= "P1" > I am a </p>
<p id= "P2" > I'm not two </p>
</div>html Code

JS Code:
var para=document.createelement ("P");
This piece of code creates a new <p> element:

var node=document.createtextnode ("I am three");
To add text to the P element, you must create a text node. This piece of code creates a text node

Para.appendchild (node);
Append this new element to an existing element

var Element=document.getelementbyid ("Div1");
Find existing elements

Element.appendchild (para);
Add a new element to an existing element

2. Delete an existing node: RemoveChild ()
Examples are as follows:
<DL id= "DL1" >
<dd id= "Dl4" > Me </dd>
<dd id= "Dl3" > to </dd>
<dd id= "DL2" > Plus </dd>
</dl>
The first thing to find is the parent node of the node to be deleted
var Ul=document.getelementbyid ("DL1");

Then select the node to be deleted
var Li=document.getelementbyid ("Dl4")

The end is to perform the delete
Ul.removechild (LI)

The code above will remove the DD tag.

3. Replace element: ReplaceChild (new node, old node)
Examples are as follows:
<div id= "Div1" >
<p id= "P1" > Ge </p>
<p id= "P2" > Hung Ming </p>
<p id= "P3" > Guan Yu </p>
<p id= "P4" > Cloud length </p>
</div>
var para=document.createelement ("P");
var node=document.createtextnode ("Wolong");
Para.appendchild (node);
var Parent=document.getelementbyid ("Div1");
var Child=document.getelementbyid ("P2");
Parent.replacechild (Para,child);
To replace the specified element first or to create a new node
And then find its parent node.
The last execution conversion replacechild (Para,child) The value inside the parentheses is the new node and the node that needs to be replaced

HTML DOM Element