XML DOM 添加节点

实例

下面的例子使用 XML 文件 books.xml。

函数 loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

在最后一个子节点之后添加一个节点

本例使用 appendChild() 方法向一个存在的节点添加一个子节点。 

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 
  4. </script>
  5. </head>
  6. <body>
  8. <script type="text/javascript">
  9. xmlDoc=loadXMLDoc("/example/xdom/books.xml");
  11. newel=xmlDoc.createElement("edition");
  13. x=xmlDoc.getElementsByTagName("book")[0];
  14. x.appendChild(newel);
  16. document.write(x.getElementsByTagName("edition")[0].nodeName);
  17. </script>
  18. </body>
  19. </html>

在指定的子节点之前添加一个节点

本例使用 insertBefore() 方法在一个指定的子节点之前插入一个节点。 

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 
  4. </script>
  5. </head>
  6. <body>
  8. <script type="text/javascript">
  9. xmlDoc=loadXMLDoc("/example/xdom/books.xml");
  11. newNode=xmlDoc.createElement("book");
  13. x=xmlDoc.documentElement;
  14. y=xmlDoc.getElementsByTagName("book");
  16. document.write("Book elements before: " + y.length);
  17. document.write("<br />");
  18. x.insertBefore(newNode,y[3]);
  20. y=xmlDoc.getElementsByTagName("book");
  21. document.write("Book elements after: " + y.length);
  22. </script>
  23. </body>
  24. </html>

添加一个新属性

本例使用 setAttribute() 方法添加一个新的属性。 

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 
  4. </script>
  5. </head>
  6. <body>
  8. <script type="text/javascript">
  9. xmlDoc=loadXMLDoc("/example/xdom/books.xml");
  11. x=xmlDoc.getElementsByTagName("title");
  13. x[0].setAttribute("edition","first");
  15. document.write("Edition: ");
  16. document.write(x[0].getAttribute("edition"));
  18. </script>
  19. </body>
  20. </html>

向文本节点添加数据

本例使用 insertData() 把数据插入一个已存在的文本节点中。 

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 
  4. </script>
  5. </head>
  6. <body>
  8. <script type="text/javascript">
  9. xmlDoc=loadXMLDoc("/example/xdom/books.xml");
  11. var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
  12. document.write(x.nodeValue);
  13. x.insertData(0,"Hello ");
  14. document.write("<br />");
  15. document.write(x.nodeValue);
  17. </script>
  18. </body>
  19. </html>

添加节点 - appendChild()

appendChild() 方法向已存在的节点添加子节点。

新节点会添加（追加）到任何已存在的子节点之后。

注释：如果节点的位置很重要，请使用 insertBefore() 方法。

下面的代码片段创建一个元素（<edition>），并把它添加到第一个 <book> 元素最后一个子节点后面：

  1. xmlDoc=loadXMLDoc("books.xml");
  2.  
  3. newel=xmlDoc.createElement("edition");
  4.  
  5. x=xmlDoc.getElementsByTagName("book")[0];
  6. x.appendChild(newel);

例子解释：

  • 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  • 创建一个新节点 <edition>
  • 把这个节点追加到第一个 <book> 元素

循环并把一个元素追加到所有 <book> 元素：

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 
  4. </script>
  5. </head>
  6. <body>
  8. <script type="text/javascript">
  9. xmlDoc=loadXMLDoc("/example/xdom/books.xml");
  11. var x=xmlDoc.getElementsByTagName('book');
  12. var newel,newtext
  14. for (i=0;i<x.length;i++)
  15.   {
  16.   newel=xmlDoc.createElement('edition');
  17.   newtext=xmlDoc.createTextNode('First');
  18.   newel.appendChild(newtext);
  19.   x[i].appendChild(newel);
  20.   }
  22. //Output all titles and editions
  23. var y=xmlDoc.getElementsByTagName("title");
  24. var z=xmlDoc.getElementsByTagName("edition");
  25. for (i=0;i<y.length;i++)
  26.   {
  27.   document.write(y[i].childNodes[0].nodeValue);
  28.   document.write(" - Edition: ");
  29.   document.write(z[i].childNodes[0].nodeValue);
  30.   document.write("<br />");
  31.   }
  32. </script>
  33. </body>
  34. </html>

插入节点 - insertBefore()

insertBefore() 方法用于在指定的子节点之前插入节点。

在被添加的节点的位置很重要时，此方法很有用。

  1. xmlDoc=loadXMLDoc("books.xml");
  2.  
  3. newNode=xmlDoc.createElement("book");
  4.  
  5. x=xmlDoc.documentElement;
  6. y=xmlDoc.getElementsByTagName("book")[3];
  7.  
  8. x.insertBefore(newNode,y);

例子解释：

  • 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  • 创建一个新的元素节点 <book>
  • 把这个节点插到最后一个 <book> 元素节点之前

如果 insertBefore() 的第二个参数是 null，新节点将添加到最后一个已有的子节点之后。

x.insertBefore(newNode,null) 和 x.appendChild(newNode) 都可以向 x 追加一个新的子节点。

添加新属性

addAtribute() 这个方法是不存在的。

如果属性不存在，则 setAttribute() 可创建一个新的属性：

  1. xmlDoc=loadXMLDoc("books.xml");
  2.  
  3. x=xmlDoc.getElementsByTagName('book');
  4. x[0].setAttribute("edition","first");

例子解释：

  • 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  • 把第一个 <book> 元素的 "edition" 属性的值设置（创建）"first"

注释：如果属性已存在，setAttribute() 方法将覆盖已有的值。

向文本节点添加文本 - insertData()

insertData() 方法将数据插入已有的文本节点中。

insertData() 方法有两个参数：

  • offset - 在何处开始插入字符（以 0 开始）
  • string - 要插入的字符串

下面的代码片段将把 "Easy" 添加到已加载的 XML 的第一个 <title> 元素的文本节点：

  1. xmlDoc=loadXMLDoc("books.xml");
  2.  
  3. x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
  4.  
  5. x.insertData(0,"Hello ");