Operations Node
Add a new child node to the end of the node's child node list
Somenode.appendchild (newchild)
Example
The following function inserts a new segment at the end of the document:
| The code is as follows |
Copy Code |
function appendmessage (message) {
var pelement = document.createelement ("P");
var Messagenode = document.createtextnode (message);
Pelement.appendchild (Messagenode);
Document.body.appendChild (pelement);
} |
Inserts a new child node before the existing child node
Somenode.insertbefore (newchild, Refchild)
The following fragment creates a new <book> node and inserts this node before the last <book> element in the document:
| code is as follows |
copy code |
| //check if The last Childnode is a element node
function get_lastchild (n)
{
var x=n.lastchild;
while (x.nodetype!=1)
{
x=x.previoussibling;
}
return x;
} Xmldoc=loadxmldoc ("books.xml");
var newnode=xmldoc.createelement ("book");
var newtitle= Xmldoc.createelement ("title");
var newtext=xmldoc.createtextnode ("A Notebook");
Newtitle.appendchild (NewText);
Newnode.appendchild (newtitle); XmlDoc.documentElement.insertBefore (Newnode,get_lastchild (x));
|
Replace one of the child nodes with another
Somenode.replacechild (New_node, Old_node)
The following code fragment replaces the <title> element in the first <book< element:
| The code is as follows |
Copy Code |
| Check if the node is a element node
function Get_firstchild (n)
{
var x=n.firstchild;
while (x.nodetype!=1)
{
x=x.nextsibling;
}
return x;
} Xmldoc=loadxmldoc ("books.xml"); Create a TITLE element and a text node
var newnode=xmldoc.createelement ("title");
var newtext=xmldoc.createtextnode ("Giada ' s Family dinners");
Add the text node to the title node,
Newnode.appendchild (NewText); Replace the new node with the
var x=xmldoc.getelementsbytagname ("book") [0];
X.replacechild (Newnode,get_firstchild (x)); Output all titles
var y=xmldoc.getelementsbytagname ("title");
for (i=0;i<y.length;i++)
{
document.write (Y[i].childnodes[0].nodevalue);
document.write ("<br/>");
}
Output:
Giada ' s Family dinners
Harry Potter
XQuery Kick Start
Learning XML |
Remove a node from the list of child nodes
Somenode.removechild (node)
The RemoveChild function deletes the specified node in the document. We still use an example to illustrate how this function is used.
HTML code
| The code is as follows |
Copy Code |
<div id= "Test" > <p> I am the node that will be deleted </p></div> instance JavaScript code
<script type= "Text/javascript" >
function Remove () {
var test = document.getElementById ("test");
var children = Test.childnodes; for (i=0;i<children.length;i++)
{
Test.removechild (Children[i]); }
}
</script> |
Delete Node Example
I am the node that will be deleted
Remove (), click on this button will be the above DIV child node all delete.
From the above JS code can be seen, using the RemoveChild format is:
Parent node. removechild (Child node)
return value of RemoveChild
RemoveChild Delete a node and then return a reference to the deleted node, so that we can use this reference when we later want to add it to the document again, or do something else about it. For example, the following code snippet:
var removed = Xxx.removechild (xxxx);
Then the removed is the deleted node, which can be used in later code.
Create nodes, Appendchild,insertbefore,dom node lookups, add nodes
| The code is as follows |
Copy Code |
| <title> New Page </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta name= "description" content= ""/>
<meta name= "keywords" content= ""/>
<script type= "Text/javascript" >
function Showpic (pic) {
var gallerynode = document.getElementById (' gallery ');
Source = Pic.getattribute (' href ');
Gallerynode.setattribute (' src ', source);
var text = pic.getattribute (' title ');
alert (text);
var des = document.getElementById (' des ');
alert (Des.nodevalue); Returns null
alert (Des.childnodes[0].nodevalue); The segment is the value that gets the text node
Des.childnodes[0].nodevalue = text;
}
Create a primitive and append it to the element after AppendChild
function T1 () {
var pnode = document.createelement (' P ');
var text = document.createTextNode (' Add content to the created text node, appendchild method ');
Pnode.appendchild (text);
var art = document.getElementById (' art ');
alert (art);
Art.appendchild (Pnode);
}
Using InsertBefore to insert before an element
Function T2 () {
var pnode = document.createelement (' P ');
var art = document.getElementById (' art ');
var zinode = art.children[0];
Art.insertbefore (Pnode,zinode); The first parameter represents the position to be inserted, and the second is the location
}
</script>
<style type= "Text/css" >
body{background: #ccc;}
. container{width:800px; margin:0 Auto;}
*{margin:0; padding:0;}
ul{list-style:none; padding:0; margin:0; width:300px;}
UL Li{background: #ccc; float:left; margin-right:10px; margin-bottom:10px; margin:30px 10px;}
UL Li a{text-decoration:none;}
#gallery {border:2px solid #ccc; display:block; clear:both;}
#des {border-bottom:1px solid red; width:400px; text-align:center; margin-bottom:10px; padding-bottom:5px; clear:both; }
#art p{width:200px; height:100px; background:red; margin-bottom:10px;}
</style>
<body>
<div class= ' container ' >
<ul>
<li><a href= ' images/pic001.jpg ' onmouseover= ' showpic (this) ' onclick= ' return false; ' title= ' lane-changing car is responsible for ' alt= ' >01</a></li>
<li><a href= ' images/pic002.jpg ' onmouseover= ' showpic ' onclick= ' return false; ' title= ' a radish a pit, A toilet a person squatting ' alt= ' >02</a></li>
<li><a href= ' images/pic003.jpg ' onmouseover= ' showpic (this) ' onclick= ' return false; ' title= ' into the Forbidden section, causing a collision accident ' alt= ' ' >03</a></li>
<li><a href= ' images/pic004.jpg ' onmouseover= ' showpic ' onclick= ' return false; ' title= ' obstacle section, Avoidance principle ' alt= "' >04</a></li>
<li><a href= ' images/pic005.jpg ' onmouseover= ' showpic ' onclick= ' return false; ' title= ' Narrow mountain sections, avoidance principle ' alt = ' >05</a></li>
</ul>
<p id= ' des ' > This is a descriptive text </p>
<div id= ' Art ' >
<p> This is a default p-element </p>
</div>
<p>
<input type= ' button ' value= ' Add node ' onclick= ' T1 (); '/>
<input type= ' button ' value= ' to the front insert node ' onclick= ' T2 (); '/>
</p>
<script type= ' Text/javascript ' >
/*var des = document.getElementById (' des ');
Alert (document.getElementsByTagName (' a ') [0].getattribute (' title '));
Des.childnodes[0].nodevalue = document.getElementsByTagName (' a ') [0].getattribute (' title ');
function Autopic () {
var anode =document.getelementsbytagname (' ul ') [0].getelementsbytagname (' a ');
alert (anode.length);
for (var i =0, len=anode.length; i<len; i++) {
Showpic (Anode[i]);
}
}
Autopic ();
</script>
</div>
</body> |
Node relationship
Parent node
Somenode.parentnode
Child nodes
Somenode.childnodes
Number of child nodes
SomeNode.childNodes.length
First child node
Somenode.firstchild
Last child node
Somenode.lastchild
Previous sibling node
Somenode.previoussibling
Next sibling node
Somenode.nextsibling
Element node only Ie9/chrome/firefox
Number of child nodes
Somenode.childelementcount
First child node
Somenode.firstelementchild
Last child node
Somenode.lastelementchild
Previous sibling node
Somenode.previouselementsibling
Next sibling node
Somenode.nextelementsibling
