XML DOM - 创建节点

在本章中，我们将讨论如何使用文档对象的几个方法创建新节点。这些方法提供了创建新元素节点、文本节点、注释节点、CDATA 节节点和属性节点的范围。如果新创建的节点已存在于元素对象中，则将其替换为新节点。以下部分通过示例对此进行了演示。

创建新的元素节点

createElement()方法创建一个新的元素节点。如果新创建的元素节点存在于元素对象中，则将其替换为新的元素节点。

句法

使用createElement()方法的语法如下 -

var_name = xmldoc.createElement("tagname");

在哪里，

  • var_name - 是用户定义的变量名称，它保存新元素的名称。

  • (“tagname”) - 是要创建的新元素节点的名称。

例子

以下示例 (createnewelement_example.htm) 将 XML 文档 ( node.xml ) 解析为 XML DOM 对象，并在 XML 文档中创建一个新元素节点PhoneNo 。

<!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");

         new_element = xmlDoc.createElement("PhoneNo");

         x = xmlDoc.getElementsByTagName("FirstName")[0];
         x.appendChild(new_element);

         document.write(x.getElementsByTagName("PhoneNo")[0].nodeName);
      </script>
   </body>
</html>

  • new_element = xmlDoc.createElement("电话号码"); 创建新元素节点 <PhoneNo>

  • x.appendChild(new_element); x保存新元素节点所附加到的指定子节点 <FirstName> 的名称。

执行

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

创建新的文本节点

createTextNode()方法创建一个新的文本节点。

句法

使用createTextNode()的语法如下 -

var_name = xmldoc.createTextNode("tagname");

在哪里，

  • var_name - 它是用户定义的变量名称，保存新文本节点的名称。

  • (“tagname”) - 括号内是要创建的新文本节点的名称。

例子

以下示例 (createtextnode_example.htm) 将 XML 文档 ( node.xml ) 解析为 XML DOM 对象，并在 XML 文档中创建一个新文本节点（即新文本节点） 。

<!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");
         create_t = xmlDoc.createTextNode("Im new text node");
         create_e.appendChild(create_t);

         x = xmlDoc.getElementsByTagName("Employee")[0];
         x.appendChild(create_e);


         document.write(" PhoneNO: ");
         document.write(x.getElementsByTagName("PhoneNo")[0].childNodes[0].nodeValue);
      </script>
    </body>
</html>

上述代码的详细信息如下 -

  • create_e = xmlDoc.createElement("电话号码"); 创建一个新元素<PhoneNo>。

  • create_t = xmlDoc.createTextNode("我是新的文本节点"); 创建一个新的文本节点“Im new text node”。

  • x.appendChild(create_e); 文本节点“Im new text node”被附加到元素<PhoneNo>。

  • document.write(x.getElementsByTagName("PhoneNo")[0].childNodes[0].nodeValue); 将新的文本节点值写入元素 <PhoneNo>。

执行

将此文件保存为服务器路径上的createtextnode_example.htm （此文件和node.xml 应位于服务器中的同一路径上）。在输出中，我们得到属性值，即PhoneNO: Im new text node。

创建新的评论节点

createComment()方法创建一个新的注释节点。程序中包含注释节点，以便于理解代码功能。

句法

使用createComment()的语法如下 -

var_name = xmldoc.createComment("tagname");

在哪里，

  • var_name - 是用户定义的变量名称，它保存新注释节点的名称。

  • (“tagname”) - 是要创建的新注释节点的名称。

例子

以下示例 (createcommentnode_example.htm) 将 XML 文档 ( node.xml ) 解析为 XML DOM 对象，并在 XML 文档中创建一个新的注释节点“Company 是父节点” 。

<!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_comment = xmlDoc.createComment("Company is the parent node");

         x = xmlDoc.getElementsByTagName("Company")[0];

         x.appendChild(create_comment);

         document.write(x.lastChild.nodeValue);
      </script>
   </body>
</html>

在上面的例子中 -

  • create_comment = xmlDoc.createComment("Company 是父节点") 创建指定的注释行。

  • x.appendChild(create_comment)在此行中，“x”保存注释行所附加到的元素 <Company> 的名称。

执行

将此文件保存为服务器路径上的createcommentnode_example.htm （此文件和node.xml应位于服务器中的同一路径上）。在输出中，我们得到属性值，因为Company 是父节点。

创建新的CDATA 节节点

createCDATASection()方法创建一个新的 CDATA 节节点。如果元素对象中存在新创建的 CDATA 节节点，则将其替换为新节点。

句法

使用createCDATASection()的语法如下 -

var_name = xmldoc.createCDATASection("tagname");

在哪里，

  • var_name - 是用户定义的变量名称，它保存新的 CDATA 节节点的名称。

  • (“tagname”) - 是要创建的新 CDATA 节节点的名称。

例子

以下示例 (createcdatanode_example.htm) 将 XML 文档 ( node.xml ) 解析为 XML DOM 对象，并在 XML 文档中创建一个新的 CDATA 节节点“Create CDATA Example” 。

<!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_CDATA = xmlDoc.createCDATASection("Create CDATA Example");

         x = xmlDoc.getElementsByTagName("Employee")[0];
         x.appendChild(create_CDATA);
         document.write(x.lastChild.nodeValue);
      </script>
   </body>
</html>

在上面的例子中 -

  • create_CDATA = xmlDoc.createCDATASection("创建 CDATA 示例")创建一个新的 CDATA 节节点，"创建 CDATA 示例"

  • x.appendChild(create_CDATA)此处，x保存索引为 0 的指定元素 <Employee>，并将 CDATA 节点值附加到该元素。

执行

将此文件保存为服务器路径上的createcdatanode_example.htm （此文件和node.xml 应位于服务器中的同一路径上）。在输出中，我们得到的属性值是Create CDATA Example。

创建新的属性节点

要创建新的属性节点，请使用setAttributeNode()方法。如果元素对象中存在新创建的属性节点，则将其替换为新的属性节点。

句法

使用createElement()方法的语法如下 -

var_name = xmldoc.createAttribute("tagname");

在哪里，

  • var_name - 是用户定义的变量名称，它保存新属性节点的名称。

  • (“tagname”) - 是要创建的新属性节点的名称。

例子

以下示例 (createattributenode_example.htm) 将 XML 文档 ( node.xml ) 解析为 XML DOM 对象，并在 XML 文档中创建新的属性节点部分。

<!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_a = xmlDoc.createAttribute("section");
         create_a.nodeValue = "A";

         x = xmlDoc.getElementsByTagName("Employee");
         x[0].setAttributeNode(create_a);
         document.write("New Attribute: ");
         document.write(x[0].getAttribute("section"));

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

在上面的例子中 -

  • create_a=xmlDoc.createAttribute("Category")创建一个名为 <section> 的属性。

  • create_a.nodeValue="Management"为属性 <section>创建值“A” 。

  • x[0].setAttributeNode(create_a)该属性值设置为索引为 0 的节点元素 <Employee>。