XML DOM增加节点

精华

小牛编辑

99浏览

2023-03-14

在本章中，我们将讨论已存在元素的节点。在这节中将学习添加(或插入)新节点 -

在现有子节点之前或之后追加新的子节点
在文本节点中插入数据
添加属性节点

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

appendChild()
insertBefore()
insertData()

1. 使用appendChild()方法

方法appendChild()用于向现有子节点之后添加新的子节点。

语法

appendChild()方法的语法如下 -

Node appendChild(Node newChild) throws DOMException

其中，

newChild − 要添加的新节点。
此方法返回已添加的节点(Node)。

示例

以下示例(append_childnode.html)将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("/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中。

执行

运行上面示例代码，得到以下结果 -

2. insertBefore()方法

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

语法
insertBefore()方法的语法如下 -

Node insertBefore(Node newChild, Node refChild) throws DOMException

其中，

newChild - 要插入的节点
refChild - 是引用节点，即必须在其之前插入新节点的节点。
此方法返回要插入的节点。

示例

以下示例(insert_nodebefore.html)将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("/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给出新元素之前和之后添加的元素总数。

执行上面示例代码，得到以下结果 -

3. insertData()方法

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

语法
insertData()的语法如下 -

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

其中，

offset - 是要插入的字符偏移量。
arg - 是插入数据的关键词。它用括号括起两个参数: offset和arg，用逗号分隔。

示例

以下示例(addtext.html)将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("/node.xml");

        x = xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0];
        document.write(x.nodeValue);
        x.insertData(3,"MiddleName");
        document.write("<br>");
        document.write(x.nodeValue);

     </script>
   </body>
</html>

x.insertData(6,"MiddleName"); − 这里，x保存指定子名称的名称，即<FirstName>。然后，从位置3开始向该文本节点插入数据 - MiddleName。

执行上面示例代码，得到以下结果 -