Dom 简明教程

XML DOM - Create Node

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

In this chapter, we will discuss how to create new nodes using a couple of methods of the document object. These methods provide a scope to create new element node, text node, comment node, CDATA section node and attribute node. If the newly created node already exists in the element object, it is replaced by the new one. Following sections demonstrate this with examples.

Create new Element node

createElement() 方法创建新元素节点。如果新创建的元素节点存在于元素对象中，则用新节点替换它。

The method createElement() creates a new element node. If the newly created element node exists in the element object, it is replaced by the new one.

Syntax

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

Syntax to use the createElement() method is as follows −

var_name = xmldoc.createElement("tagname");

其中，

Where,

  1. var_name − is the user-defined variable name which holds the name of new element.

  2. ("tagname") − is the name of new element node to be created.

Example

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

The following example (createnewelement_example.htm) parses an XML document (node.xml) into an XML DOM object and creates a new element node PhoneNo in the XML document.

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

  1. new_element = xmlDoc.createElement("PhoneNo"); creates the new element node <PhoneNo>

  2. x.appendChild(new_element); x holds the name of the specified child node <FirstName> to which the new element node is appended.

Execution

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

Save this file as createnewelement_example.htm on the server path (this file and node.xml should be on the same path in your server). In the output we get the attribute value as PhoneNo.

Create new Text node

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

The method createTextNode() creates a new text node.

Syntax

使用 createTextNode() 的语法如下 −

Syntax to use createTextNode() is as follows −

var_name = xmldoc.createTextNode("tagname");

其中，

Where,

  1. var_name − it is the user-defined variable name which holds the name of new text node.

  2. ("tagname") − within the parenthesis is the name of new text node to be created.

Example

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

The following example (createtextnode_example.htm) parses an XML document (node.xml) into an XML DOM object and creates a new text node Im new text node in the XML document.

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

以上代码的详细信息如下 −

Details of the above code are as below −

  1. create_e = xmlDoc.createElement("PhoneNo"); creates a new element <PhoneNo>.

  2. create_t = xmlDoc.createTextNode("Im new text node"); creates a new text node "Im new text node".

  3. x.appendChild(create_e); the text node, "Im new text node" is appended to the element, <PhoneNo>.

  4. document.write(x.getElementsByTagName("PhoneNo")[0].childNodes[0].nodeValue); writes the new text node value to the element <PhoneNo>.

Execution

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

Save this file as createtextnode_example.htm on the server path (this file and node.xml should be on the same path in your server). In the output, we get the attribute value as i.e. PhoneNO: Im new text node.

Create new Comment node

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

The method createComment() creates a new comment node. Comment node is included in the program for the easy understanding of the code functionality.

Syntax

createComment() 的使用语法如下 −

Syntax to use createComment() is as follows −

var_name = xmldoc.createComment("tagname");

其中，

Where,

  1. var_name − is the user-defined variable name which holds the name of new comment node.

  2. ("tagname") − is the name of the new comment node to be created.

Example

以下示例 (createcommentnode_example.htm) 将 XML 文档 ( node.xml ) 解析成 XML DOM 对象，并在 XML 文档中创建新的注释节点，即 “Company is the parent node”。

The following example (createcommentnode_example.htm) parses an XML document (node.xml) into an XML DOM object and creates a new comment node, "Company is the parent node" in the XML document.

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

在以上示例中 −

In the above example −

  1. create_comment = xmlDoc.createComment("Company is the parent node") creates a specified comment line.

  2. x.appendChild(create_comment) In this line, 'x' holds the name of the element <Company> to which the comment line is appended.

Execution

将此文件保存为 createcommentnode_example.htm，保存到服务器路径（此文件和 node.xml 应在服务器上的同一路径中）。在输出中，我们获取的属性值为 Company is the parent node。

Save this file as createcommentnode_example.htm on the server path (this file and the node.xml should be on the same path in your server). In the output, we get the attribute value as Company is the parent node .

Create New CDATA Section Node

createCDATASection() 方法会创建新的 CDATA 节点。如果新创建的 CDATA 节点存在于元素对象中，它会被新的 CDATA 节点替换。

The method createCDATASection() creates a new CDATA section node. If the newly created CDATA section node exists in the element object, it is replaced by the new one.

Syntax

createCDATASection() 的使用语法如下 −

Syntax to use createCDATASection() is as follows −

var_name = xmldoc.createCDATASection("tagname");

其中，

Where,

  1. var_name − is the user-defined variable name which holds the name of new the CDATA section node.

  2. ("tagname") − is the name of new CDATA section node to be created.

Example

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

The following example (createcdatanode_example.htm) parses an XML document (node.xml) into an XML DOM object and creates a new CDATA section node, "Create CDATA Example" in the XML document.

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

在以上示例中 −

In the above example −

  1. create_CDATA = xmlDoc.createCDATASection("Create CDATA Example") creates a new CDATA section node, "Create CDATA Example"

  2. x.appendChild(create_CDATA) here, x holds the specified element <Employee> indexed at 0 to which the CDATA node value is appended.

Execution

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

Save this file as createcdatanode_example.htm on the server path (this file and node.xml should be on the same path in your server). In the output, we get the attribute value as Create CDATA Example.

Create new Attribute node

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

To create a new attribute node, the method setAttributeNode() is used. If the newly created attribute node exists in the element object, it is replaced by the new one.

Syntax

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

Syntax to use the createElement() method is as follows −

var_name = xmldoc.createAttribute("tagname");

其中，

Where,

  1. var_name − is the user-defined variable name which holds the name of new attribute node.

  2. ("tagname") − is the name of new attribute node to be created.

Example

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

The following example (createattributenode_example.htm) parses an XML document (node.xml) into an XML DOM object and creates a new attribute node section in the XML document.

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

在以上示例中 −

In the above example −

  1. create_a=xmlDoc.createAttribute("Category") creates an attribute with the name <section>.

  2. create_a.nodeValue="Management" creates the value "A" for the attribute <section>.

  3. x[0].setAttributeNode(create_a) this attribute value is set to the node element <Employee> indexed at 0.