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("https://img01.yuandaxia.cn/Content/img/tutorials/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>附加新元素节点.

执行

将此文件另存为

创建新文本节点

方法 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("https://img01.yuandaxia.cn/Content/img/tutorials/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("我是新文本节点"); 创建一个新文本节点"我是新文本节点".

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

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

执行

在服务器路径上将此文件另存为 createtextnode_example.htm (此文件和node.xml应位于服务器的同一路径上).在输出中,我们得到属性值为ie 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文档中的父节点".

<!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_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("公司是父节点") 创建指定的注释行.

  • x.appendChild(create_comment)在这一行中,'x'包含元素< Company>的名称.注释行附加到其中.

执行

将此文件另存为服务器路径上的createcommentnode_example.htm (此文件和 node.xml 应该在您的服务器上的相同路径上).在输出中,我们得到属性值为公司是父节点.

创建新的 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节节点"创建CDATA示例".

<!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_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 包含指定的元素< Employee>索引为0,附加CDATA节点值.

执行

保存此文件as createcdatanode_example.htm 在服务器路径上(此文件和node.xml应位于服务器中的同一路径上).在输出中,我们得到属性值为创建CDATA示例.

创建新的属性节点

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

语法

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

 
 var_name = xmldoc.createAttribute("tagname");

其中,

  • var_name : 是用户定义的变量名,它包含新属性节点的名称.

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

示例

以下示例( createattributenode_example.htm)将XML文档( node.xml )解析为XML DOM对象并在XML文档中创建一个新属性node 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("https://img01.yuandaxia.cn/Content/img/tutorials/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)此属性值设置为节点元素< Employee>索引为0.