在本章中,我们将讨论现有元素的节点.它提供了一种方法来减去;
在现有子节点之前或之后追加新的子节点
在文本节点中插入数据
添加属性节点
以下方法可用于将节点添加/附加到DOM中的元素并减去;
appendChild()
insertBefore()
insertData()
方法appendChild()在现有子节点之后添加新的子节点.
appendChild()方法的语法如下 :
Node appendChild(Node newChild) throws DOMException
其中,
newChild : 是要添加的节点
此方法返回添加的节点.
以下示例(appendchildnode_example.htm)解析XML文档( node.xml )到XML DOM对象中,并将新的子 PhoneNo 附加到元素< FirstName>.
<!DOCTYPE html> <html> <head> <script> function loadXMLDoc(filename) { if (window.XMLHttpRequest) { xhttp = new XMLHttpRequest(); } else // code for IE5 and IE6 { xhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("GET",filename,false); xhttp.send(); return xhttp.responseXML; } </script> </head> <body> <script> xmlDoc = loadXMLDoc("https://img01.yuandaxia.cn/Content/img/tutorials/dom/node.xml"); create_e = xmlDoc.createElement("PhoneNo"); x = xmlDoc.getElementsByTagName("FirstName")[0]; x.appendChild(create_e); document.write(x.getElementsByTagName("PhoneNo")[0].nodeName); </script> </body> </html>
在上面的例子中 :
使用createElement()方法创建一个新元素 PhoneNo .
新元素 PhoneNo 使用方法appendChild()添加到元素 FirstName .
将此文件保存为服务器路径上的 appendchildnode_example.htm (此文件和node.xml应位于服务器的同一路径上).在输出中,我们得到属性值为 PhoneNo .
方法 insertBefore (),在指定的子节点之前插入新的子节点.
insertBefore()方法的语法如下 :
Node insertBefore(Node newChild, Node refChild) throws DOMException
其中,
newChild : 是要插入的节点
refChild : 是引用节点,即必须在其之前插入新节点的节点.
此方法返回插入的节点 .
以下示例(insertnodebefore_example.htm)解析XML文档( node.xml )到XML DOM对象并插入新的子 Email 在指定元素之前<电子邮件>.
<!DOCTYPE html> <html> <head> <script> function loadXMLDoc(filename) { if (window.XMLHttpRequest) { xhttp = new XMLHttpRequest(); } else // code for IE5 and IE6 { xhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("GET",filename,false); xhttp.send(); return xhttp.responseXML; } </script> </head> <body> <script> xmlDoc = loadXMLDoc("https://img01.yuandaxia.cn/Content/img/tutorials/dom/node.xml"); create_e = xmlDoc.createElement("Email"); x = xmlDoc.documentElement; y = xmlDoc.getElementsByTagName("Email"); document.write("No of Email elements before inserting was: " + y.length); document.write("<br>"); x.insertBefore(create_e,y[3]); y=xmlDoc.getElementsByTagName("Email"); document.write("No of Email elements after inserting is: " + y.length); </script> </body> </html>
在上面的例子中 :
使用createElement()方法创建一个新元素电子邮件.
新元素电子邮件使用方法insertBefore()在元素电子邮件之前添加.
y.length 给出新元素之前和之后添加的元素总数.
保存此文件as insertnodebefore_example.htm 在服务器路径上(此文件和node.xml应位于服务器的同一路径上).我们将收到以下输出 :
No of Email elements before inserting was: 3 No of Email elements after inserting is: 4
方法insertData(),在指定的16位单位偏移量处插入一个字符串.
insertData()具有以下语法 :
void insertData(int offset,java.lang.String arg)throws DOMException
Where,
offset : 是要插入的字符偏移量.
arg : 是插入数据的关键词.它用括号括起两个参数offset和字符串,用逗号分隔.
以下示例(addtext_example.htm)解析XML文档(" node.xml ")到XML DOM对象并在指定位置将新数据 MiddleName 插入元素< FirstName>.
<!DOCTYPE html> <html> <head> <script> function loadXMLDoc(filename) { if (window.XMLHttpRequest) { xhttp = new XMLHttpRequest(); } else // code for IE5 and IE6 { xhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("GET",filename,false); xhttp.send(); return xhttp.responseXML; } </script> </head> <body> <script> xmlDoc = loadXMLDoc("https://img01.yuandaxia.cn/Content/img/tutorials/dom/node.xml"); x = xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0]; document.write(x.nodeValue); x.insertData(6,"MiddleName"); document.write("<br>"); document.write(x.nodeValue); </script> </body> </html>
x.insertData(6,"MiddleName"); : 这里, x 保存指定子名的名称,即< FirstName>.然后,我们从位置6开始向此文本节点插入数据"MiddleName".
将此文件保存为服务器路径上的 addtext_example.htm (此文件和node.xml应位于服务器的同一路径上).我们将在输出中收到以下内容 :
Tanmay TanmayMiddleName