XML DOM - 添加节点

在本章中，我们将讨论将节点添加到现有元素。它提供了一种方法来−

• 在现有子节点之前或之后附加新的子节点

• 在文本节点内插入数据

• 添加属性节点

以下方法可用于将节点添加/附加到 DOM 中的元素−

• appendChild()
• insertBefore()
• insertData()

appendChild()

方法 appendChild() 在现有子节点后添加新的子节点。

语法

appendChild() 方法的语法如下−

Node appendChild(Node newChild) throws DOMException

其中，

• newChild − 是要添加的节点

• 此方法返回添加的 Node。

示例

以下示例 (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("/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。

• 使用方法 appendChild() 将新元素 PhoneNo 添加到元素 FirstName。

执行

将此文件在服务器路径上另存为 appendchildnode_example.htm(此文件和 node.xml 应位于服务器中的同一路径上)。在输出中，我们得到的属性值为 PhoneNo。

insertBefore()

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

语法

insertBefore() 方法的语法如下 −

Node insertBefore(Node newChild, Node refChild) throws DOMException

其中，

• newChild − 是要插入的节点

• refChild −是引用节点，即必须在其前插入新节点的节点。

• 此方法返回要插入的 Node。

示例

以下示例 (insertnodebefore_example.htm) 将 XML 文档 (node.xml) 解析为 XML DOM 对象，并在指定元素 <Email> 前插入新子元素 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>

在上述示例中 −

• 使用方法 createElement()，创建一个新元素 Email。

• 使用方法 insertBefore()，在元素 Email 之前添加新元素 Email。

• y.length 给出在新元素之前和之后添加的元素总数。

执行

将此文件在服务器路径上另存为 insertnodebefore_example.htm(此文件和 node.xml 应位于服务器中的同一路径上)。我们将收到以下输出 −

No of Email elements before inserting was: 3
No of Email elements after inserting is: 4 

insertData()

方法 insertData() 在指定的 16 位单位偏移处插入一个字符串。

语法

insertData() 具有以下语法 −

void insertData(int offset, java.lang.String arg) 抛出 DOMException

其中，

• offset − 是要插入的字符偏移量。

• arg − 是插入数据的关键字。它将两个参数 offset 和 string 括在括号内，并用逗号分隔。

示例

以下示例 (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("/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