DOM Node Chapter

1, creating elements

Document.createelement (' element name to create ');

2. Inserting nodes

AppendChild and InsertBefore

3. Delete a node

RemoveChild usage removechild (' which node is to be deleted ');

Example, the comparison of the two nodes, and the deletion

Insert nodes, there are two ways, appendchild and insertbefore the difference between the appendchild is to insert a new node inside the specified node, the position is in the last Face, InsertBefore (new node, the location of the existing node) ; The first node position inserted in the specified node
var oul=document.createelement (' ul ');
var odiv=document.createelement (' div ');
var otext=document.createtextnode (' Add New item: ');
var oinpu=document.createelement (' input ');
var obtn=document.createelement (' button ');
var otxt=document.createtextnode (' click ');
var obtn1=document.createelement (' button ');
var otx=document.createtextnode (' delete ');
function Appchd () {
Obtn.appendchild (Otxt);
Obtn1.appendchild (OTX);
Odiv.appendchild (OINPU);
Odiv.insertbefore (OTEXT,OINPU);//insertbefore Add a parameter is always error, get two parameters
Oul.appendchild (ODIV);
Document.body.appendChild (Oul);
Document.body.appendChild (ODIV);
Document.body.appendChild (OBTN);
Document.body.appendChild (OBTN1);
}
Appchd ();
Obtn.onclick=function () {
var intv=oinpu.value;//gets to the value
var ali=document.createelement (' Li ');
var intn=document.createtextnode (INTV);//Create a text node, put the obtained value, put it in
Ali.appendchild (IntN);
Oul.appendchild (aLi); The newly added nodes are put to the end.
if (oul.childnodes.length==0) {//To determine if the child node inside the parent node exists, if there is no execution append statement
Alert (1);
Oul.appendchild (ALi);
}else{
Oul.insertbefore (Ali,oul.firstchild);
}
}
Delete node removechild ();
Obtn1.onclick=function () {
if (Oul.haschildnodes ()) {
Oul.removechild (oul.firstchild);//delete the first node inside the parent node
Oul.removechild (oul.lastchild);//delete the last node inside the parent junction.
Oul.removechild (oul.childnodes[3])//delete a child node in any one of the parent nodes, Oul.childnodes[i],i can be any value
}
}

DOM Node Chapter