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"); 创建新元素节点 <PhoneNo>

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

执行

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

创建新的 Text 节点

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

语法

使用 createTextNode() 的语法如下 −

var_name = xmldoc.createTextNode("tagname");

其中，

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

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

示例

以下示例 (createtextnode_example.htm) 将 XML 文档 (node.xml) 解析为 XML DOM 对象，并在 XML 文档中创建新的文本节点 Im new text node。

<!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");创建一个新元素 <PhoneNo>。

• create_t = xmlDoc.createTextNode("Im new text node");创建一个新文本节点 "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。

创建新的 Comment 节点

方法 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("Create CDATA Example") 创建一个新的 CDATA 部分节点，"Create CDATA Example"

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

执行

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

创建新的 Attribute 节点

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

语法

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

var_name = xmldoc.createAttribute("tagname");

其中，

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

• ("tagname") −是要创建的新属性节点的名称。

示例

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

<!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>。