XML DOM - 新增節點

在本章中，我們將討論將節點新增到現有元素的方法。它提供了一種方法來：

在現有子節點之前或之後附加新的子節點
在文字節點中插入資料
新增屬性節點

以下方法可用於將節點新增到 DOM 中的元素：

appendChild()
insertBefore()
insertData()

appendChild()

appendChild() 方法在現有子節點之後新增新的子節點。

語法

appendChild() 方法的語法如下：

Node appendChild(Node newChild) throws DOMException

其中，

newChild - 要新增的節點
此方法返回新增的節點。

示例

以下示例 (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 - 參考節點，即必須在該節點之前插入新節點的節點。
此方法返回正在插入的節點。

示例

以下示例 (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) throws DOMException

其中，

offset - 要插入的字元偏移量。
arg - 要插入資料的關鍵字。它將偏移量和字串這兩個引數括在括號內，用逗號分隔。

示例

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

列印頁面