Dom 简明教程
XML DOM - Add Node
在本章中，我们将讨论现有元素的节点。它提供了一种方式来 −
In this chapter, we will discuss the nodes to the existing element. It provides a means to −
-
append new child nodes before or after the existing child nodes
-
insert data within the text node
-
add attribute node
可以使用以下方法将节点添加到 DOM 中的元素 −
Following methods can be used to add/append the nodes to an element in a DOM −
-
appendChild()
-
insertBefore()
-
insertData()
appendChild()
方法 appendChild() 在现有子节点之后添加新的子节点。
The method appendChild() adds the new child node after the existing child node.
Syntax
appendChild() 方法的语法如下 −
Syntax of appendChild() method is as follows −
Node appendChild(Node newChild) throws DOMException其中，
Where,
-
newChild − Is the node to add
-
This method returns the Node added.
Example
以下示例 (appendchildnode_example.htm) 将 XML 文档 ( node.xml ) 解析成 XML DOM 对象，并将新的子节点 PhoneNo 附加到元素 <FirstName>。
The following example (appendchildnode_example.htm) parses an XML document (node.xml) into an XML DOM object and appends new child PhoneNo to the element <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("/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>在以上示例中 −
In the above example −
-
using the method createElement(), a new element PhoneNo is created.
-
The new element PhoneNo is added to the element FirstName using the method appendChild().
insertBefore()
insertBefore() 方法在指定的子节点前插入新的子节点。
The method insertBefore(), inserts the new child nodes before the specified child nodes.
Syntax
insertBefore() 方法的语法如下 −
Syntax of insertBefore() method is as follows −
Node insertBefore(Node newChild, Node refChild) throws DOMException其中，
Where,
-
newChild − Is the node to insert
-
refChild − Is the reference node, i.e., the node before which the new node must be inserted.
-
This method returns the Node being inserted.
Example
以下示例 (insertnodebefore_example.htm) 将 XML 文档 ( node.xml ) 解析成 XML DOM 对象，并在指定的元素 <Email> 前插入新的子节点 Email。
The following example (insertnodebefore_example.htm) parses an XML document (node.xml) into an XML DOM object and inserts new child Email before the specified element <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("/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>在以上示例中 −
In the above example −
-
using the method createElement(), a new element Email is created.
-
The new element Email is added before the element Email using the method insertBefore().
-
y.length gives the total number of elements added before and after the new element.
Execution
将此文件另存为 insertnodebefore_example.htm 并放在服务器路径上（此文件和 node.xml 应在服务器上处于相同的路径）。我们将收到以下输出 −
Save this file as insertnodebefore_example.htm on the server path (this file and node.xml should be on the same path in your server). We will receive the following output −
No of Email elements before inserting was: 3
No of Email elements after inserting is: 4insertData()
insertData() 方法在指定的 16 位单位偏移量处插入字符串。
The method insertData(), inserts a string at the specified 16-bit unit offset.
Syntax
insertData() 具有以下语法：
The insertData() has the following syntax −
void insertData(int offset, java.lang.String arg) throws DOMException其中，
Where,
-
offset − is the character offset at which to insert.
-
arg − is the key word to insert the data. It encloses the two parameters offset and string within the parenthesis separated by comma.
Example
以下示例 (addtext_example.htm) 将 XML 文档 (“ node.xml ”) 解析为 XML DOM 对象，并将新数据 MiddleName 插入到指定位置以获取元素 <FirstName>。
The following example (addtext_example.htm) parses an XML document ("node.xml") into an XML DOM object and inserts new data MiddleName at the specified position to the element <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("/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"); − Here, x holds the name of the specified child name, i.e, <FirstName>. We then insert to this text node the data "MiddleName" starting from position 6.