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("https://img01.yuandaxia.cn/Content/img/tutorials/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 .

  • 新元素 PhoneNo 使用方法appendChild()添加到元素 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 在指定元素之前<电子邮件>.

<!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("https://img01.yuandaxia.cn/Content/img/tutorials/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()方法创建一个新元素电子邮件.

  • 新元素电子邮件使用方法insertBefore()在元素电子邮件之前添加.

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

执行

保存此文件as 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

Where,

  • offset : 是要插入的字符偏移量.

  • arg : 是插入数据的关键词.它用括号括起两个参数offset和字符串,用逗号分隔.

示例

以下示例(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("https://img01.yuandaxia.cn/Content/img/tutorials/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