XML DOM appendChild() 方法
XML基础 2023-08-13 14:50:22小码哥的IT人生shichen
XML DOM appendChild() 方法
定义和用法
appendChild() 方法在指定元素节点的最后一个子节点之后添加节点。
该方法返回新的子节点。
语法：
appendChild(node)
| 参数 | 描述 |
|---|---|
| node | 必需。要追加的节点。 |
实例
在所有的例子中，我们将使用 XML 文件 books.xml，以及 JavaScript 函数 loadXMLDoc()。
下面的代码片段创建并向第一个 <book> 元素追加了一个节点，然后输出第一个 <book> 元素的的所有子节点：
xmlDoc=loadXMLDoc("books.xml");
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
y=xmlDoc.getElementsByTagName("title");
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 />");
}
以上代码的输出：
Everyday Italian - Edition: First
Harry Potter - Edition: First
XQuery Kick Start - Edition: First
Learning XML - Edition: First
注释：Internet Explorer 会忽略节点之间生成的空白文本节点（比如换行字符），而 Mozilla 不这么做。因此，在上面的例子中，我们仅仅处理元素节点（元素节点的 nodeType 等于 1）。
如需更多有关 IE 与 Mozilla 浏览器差异的内容，请访问 phpcodeweb 的 XML DOM 教程中的 DOM 浏览器 这一节。
TIY
完整实例【appendChild() - 向第一个 <book> 节点追加子节点】：
<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 newel=xmlDoc.createElement('edition');
var newtext=xmlDoc.createTextNode('First');
newel.appendChild(newtext);
var x=xmlDoc.getElementsByTagName('book')[0];
x.appendChild(newel);
var y=x.childNodes;
for (var i=0;i<y.length;i++)
{
//Display only element nodes
if (y[i].nodeType==1)
{
document.write(y[i].nodeName);
document.write("<br />");
}
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【appendChild() - 向所有 <book> 节点追加子节点】：
<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
