XML DOM 添加节点
XML DOM 添加节点
实例
下面的例子使用 XML 文件 books.xml。
函数 loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。
完整实例【在最后一个子节点之后添加一个节点】：
<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js">
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/demo/example/xdom/books.xml");
newel=xmlDoc.createElement("edition");
x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newel);
document.write(x.getElementsByTagName("edition")[0].nodeName);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例使用 appendChild() 方法向一个存在的节点添加一个子节点。
完整实例【在指定的子节点之前添加一个节点】：
<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js">
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/demo/example/xdom/books.xml");
newNode=xmlDoc.createElement("book");
x=xmlDoc.documentElement;
y=xmlDoc.getElementsByTagName("book");
document.write("Book elements before: " + y.length);
document.write("<br />");
x.insertBefore(newNode,y[3]);
y=xmlDoc.getElementsByTagName("book");
document.write("Book elements after: " + y.length);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例使用 insertBefore() 方法在一个指定的子节点之前插入一个节点。
完整实例【添加一个新属性】：
<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js">
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/demo/example/xdom/books.xml");
x=xmlDoc.getElementsByTagName("title");
x[0].setAttribute("edition","first");
document.write("Edition: ");
document.write(x[0].getAttribute("edition"));
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例使用 setAttribute() 方法添加一个新的属性。
完整实例【向文本节点添加数据】：
<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js">
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/demo/example/xdom/books.xml");
var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
document.write(x.nodeValue);
x.insertData(0,"Hello ");
document.write("<br />");
document.write(x.nodeValue);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例使用 insertData() 把数据插入一个已存在的文本节点中。
添加节点 - appendChild()
appendChild() 方法向已存在的节点添加子节点。
新节点会添加（追加）到任何已存在的子节点之后。
注释：如果节点的位置很重要，请使用 insertBefore() 方法。
下面的代码片段创建一个元素（<edition>），并把它添加到第一个 <book> 元素最后一个子节点后面：
xmlDoc=loadXMLDoc("books.xml");
newel=xmlDoc.createElement("edition");
x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newel);
例子解释：
- 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
- 创建一个新节点 <edition>
- 把这个节点追加到第一个 <book> 元素
完整实例【TIY】：
<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js">
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/demo/example/xdom/books.xml");
newel=xmlDoc.createElement("edition");
x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newel);
document.write(x.getElementsByTagName("edition")[0].nodeName);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
循环并把一个元素追加到所有 <book> 元素：
完整实例【TIY】：
<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js">
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/demo/example/xdom/books.xml");
var x=xmlDoc.getElementsByTagName('book');
var newel,newtext
for (i=0;i<x.length;i++)
{
newel=xmlDoc.createElement('edition');
newtext=xmlDoc.createTextNode('First');
newel.appendChild(newtext);
x[i].appendChild(newel);
}
//Output all titles and editions
var y=xmlDoc.getElementsByTagName("title");
var z=xmlDoc.getElementsByTagName("edition");
for (i=0;i<y.length;i++)
{
document.write(y[i].childNodes[0].nodeValue);
document.write(" - Edition: ");
document.write(z[i].childNodes[0].nodeValue);
document.write("<br />");
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
插入节点 - insertBefore()
insertBefore() 方法用于在指定的子节点之前插入节点。
在被添加的节点的位置很重要时，此方法很有用。
xmlDoc=loadXMLDoc("books.xml");
newNode=xmlDoc.createElement("book");
x=xmlDoc.documentElement;
y=xmlDoc.getElementsByTagName("book")[3];
x.insertBefore(newNode,y);
例子解释：
- 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
- 创建一个新的元素节点 <book>
- 把这个节点插到最后一个 <book> 元素节点之前
完整实例【TIY】：
<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js">
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/demo/example/xdom/books.xml");
newNode=xmlDoc.createElement("book");
x=xmlDoc.documentElement;
y=xmlDoc.getElementsByTagName("book");
document.write("Book elements before: " + y.length);
document.write("<br />");
x.insertBefore(newNode,y[3]);
y=xmlDoc.getElementsByTagName("book");
document.write("Book elements after: " + y.length);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如果 insertBefore() 的第二个参数是 null，新节点将添加到最后一个已有的子节点之后。
x.insertBefore(newNode,null) 和 x.appendChild(newNode) 都可以向 x 追加一个新的子节点。
添加新属性
addAtribute() 这个方法是不存在的。
如果属性不存在，则 setAttribute() 可创建一个新的属性：
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName('book');
x[0].setAttribute("edition","first");
例子解释：
- 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
- 把第一个 <book> 元素的 "edition" 属性的值设置（创建）"first"
完整实例【TIY】：
<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js">
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/demo/example/xdom/books.xml");
x=xmlDoc.getElementsByTagName("title");
x[0].setAttribute("edition","first");
document.write("Edition: ");
document.write(x[0].getAttribute("edition"));
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
注释：如果属性已存在，setAttribute() 方法将覆盖已有的值。
向文本节点添加文本 - insertData()
insertData() 方法将数据插入已有的文本节点中。
insertData() 方法有两个参数：
- offset - 在何处开始插入字符（以 0 开始）
- string - 要插入的字符串
下面的代码片段将把 "Easy" 添加到已加载的 XML 的第一个 <title> 元素的文本节点：
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.insertData(0,"Hello ");
完整实例【TIY】：
<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js">
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/demo/example/xdom/books.xml");
var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
document.write(x.nodeValue);
x.insertData(0,"Hello ");
document.write("<br />");
document.write(x.nodeValue);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
