XML DOM增加節點

在本章中，我們將討論已存在元素的節點。在這節中將學習添加(或插入)新節點 -

在現有子節點之前或之後追加新的子節點
在文本節點中插入數據
添加屬性節點

以下方法可用於將節點元素添加/附加到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中。

執行

運行上面示例代碼，得到以下結果 -

XML

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給出新元素之前和之後添加的元素總數。

執行上面示例代碼，得到以下結果 -

XML

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。

執行上面示例代碼，得到以下結果 -

XML

DOM教程

XML DOM操作

XML DOM對象

XML DOM增加節點

1. 使用appendChild()方法

2. insertBefore()方法

3. insertData()方法