XML DOM - Utwórz węzeł

W tym rozdziale omówimy, jak tworzyć nowe węzły przy użyciu kilku metod obiektu dokumentu. Te metody zapewniają zakres tworzenia nowego węzła elementu, węzła tekstowego, węzła komentarza, węzła sekcji CDATA i węzła atrybutów . Jeśli nowo utworzony węzeł już istnieje w obiekcie elementu, zostanie zastąpiony nowym. Poniższe sekcje pokazują to na przykładach.

Utwórz nowy węzeł Element

Metoda createElement () tworzy nowy węzeł elementu. Jeśli nowo utworzony węzeł elementu istnieje w obiekcie elementu, jest zastępowany nowym.

Składnia

Składnia użycia metody createElement () jest następująca -

var_name = xmldoc.createElement("tagname");

Gdzie,

  • nazwa_zmiennej - to nazwa zmiennej zdefiniowanej przez użytkownika, która przechowuje nazwę nowego elementu.

  • ("zmienna") - jest to nazwa tworzonego węzła elementu.

Przykład

Poniższy przykład (createnewelement_example.htm) analizuje dokument XML ( node.xml ) do obiektu XML DOM i tworzy nowy element węzeł PhoneNo w dokumencie 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");

         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"); tworzy nowy węzeł elementu <PhoneNo>

  • x.appendChild (nowy_element); x zawiera nazwę określonego węzła podrzędnego <FirstName>, do którego dołączany jest nowy węzeł elementu.

Wykonanie

Zapisz ten plik jako createnewelement_example.htm na ścieżce serwera (ten plik i node.xml powinny znajdować się w tej samej ścieżce na serwerze). W wyniku otrzymujemy wartość atrybutu jako PhoneNo .

Utwórz nowy węzeł tekstowy

Metoda createTextNode () tworzy nowy węzeł tekstowy.

Składnia

Składnia do użycia funkcji createTextNode () jest następująca -

var_name = xmldoc.createTextNode("tagname");

Gdzie,

  • nazwa_zmiennej - jest to nazwa zmiennej zdefiniowanej przez użytkownika, która przechowuje nazwę nowego węzła tekstowego.

  • ("zmienna") - w nawiasie podano nazwę tworzonego węzła tekstowego.

Przykład

Poniższy przykład (createtextnode_example.htm) analizuje dokument XML ( node.xml ) do obiektu XML DOM i tworzy nowy węzeł tekstowy Im nowy węzeł tekstowy w dokumencie 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>

Szczegóły powyższego kodu są jak poniżej -

  • create_e = xmlDoc.createElement ("PhoneNo"); tworzy nowy element < PhoneNo >.

  • create_t = xmlDoc.createTextNode ("Jestem nowym węzłem tekstowym"); tworzy nowy węzeł tekstowy „Im nowy węzeł tekstowy” .

  • x.appendChild (create_e); węzeł tekstowy „Im nowy węzeł tekstowy” jest dołączany do elementu < PhoneNo >.

  • document.write (x.getElementsByTagName ("PhoneNo") [0] .childNodes [0] .nodeValue); zapisuje nową wartość węzła tekstowego do elementu <PhoneNo>.

Wykonanie

Zapisz ten plik jako createtextnode_example.htm na ścieżce serwera (ten plik i node.xml powinny znajdować się w tej samej ścieżce na serwerze). Na wyjściu otrzymujemy wartość atrybutu jako np. PhoneNO: Im nowy węzeł tekstowy .

Utwórz nowy węzeł komentarza

Metoda createComment () tworzy nowy węzeł komentarza. W programie zawarto węzeł komentarza w celu ułatwienia zrozumienia funkcjonalności kodu.

Składnia

Składnia do użycia funkcji createComment () jest następująca -

var_name = xmldoc.createComment("tagname");

Gdzie,

  • nazwa_zmiennej - jest nazwą zmiennej zdefiniowanej przez użytkownika, która zawiera nazwę nowego węzła komentarza.

  • ("zmienna") - jest nazwą tworzonego węzła komentarza.

Przykład

Poniższy przykład (createcommentnode_example.htm) analizuje dokument XML ( node.xml ) do obiektu XML DOM i tworzy nowy węzeł komentarza „Firma jest węzłem nadrzędnym” w dokumencie 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_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>

W powyższym przykładzie -

  • create_comment = xmlDoc.createComment ("Firma jest węzłem nadrzędnym") creates a specified comment line.

  • x.appendChild (create_comment) W tym wierszu „x” zawiera nazwę elementu <Firma>, do którego jest dołączany wiersz komentarza.

Wykonanie

Zapisz ten plik jako createcommentnode_example.htm na ścieżce serwera (ten plik i node.xml powinny znajdować się w tej samej ścieżce na serwerze). W danych wyjściowych otrzymujemy wartość atrybutu, ponieważ firma jest węzłem nadrzędnym .

Utwórz nowy węzeł sekcji CDATA

Metoda createCDATASection () tworzy nowy węzeł sekcji CDATA. Jeśli nowo utworzony węzeł sekcji CDATA istnieje w obiekcie elementu, jest zastępowany nowym.

Składnia

Składnia do użycia createCDATASection () jest następująca -

var_name = xmldoc.createCDATASection("tagname");

Gdzie,

  • nazwa_zmiennej - to nazwa zmiennej zdefiniowanej przez użytkownika, która przechowuje nazwę nowego węzła sekcji CDATA.

  • ("zmienna") - to nazwa tworzonego węzła sekcji CDATA.

Przykład

Poniższy przykład (createcdatanode_example.htm) analizuje dokument XML ( node.xml ) do obiektu XML DOM i tworzy nowy węzeł sekcji CDATA „Utwórz przykład CDATA” w dokumencie 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_CDATA = xmlDoc.createCDATASection("Create CDATA Example");

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

W powyższym przykładzie -

  • create_CDATA = xmlDoc.createCDATASection ("Utwórz przykład CDATA") tworzy nowy węzeł sekcji CDATA, "Utwórz przykład CDATA"

  • x.appendChild (create_CDATA) tutaj, x przechowuje określony element <Employee> indeksowany na 0, do którego jest dołączana wartość węzła CDATA.

Wykonanie

Zapisz ten plik jako createcdatanode_example.htm na ścieżce serwera (ten plik i node.xml powinny znajdować się w tej samej ścieżce na serwerze). W danych wyjściowych otrzymujemy wartość atrybutu jako przykład utworzenia CDATA .

Utwórz nowy węzeł atrybutów

Aby utworzyć nowy węzeł atrybutu, używana jest metoda setAttributeNode () . Jeśli nowo utworzony węzeł atrybutu istnieje w obiekcie elementu, zostanie zastąpiony nowym.

Składnia

Składnia użycia metody createElement () jest następująca -

var_name = xmldoc.createAttribute("tagname");

Gdzie,

  • nazwa_zmiennej - jest nazwą zmiennej zdefiniowanej przez użytkownika, która przechowuje nazwę nowego węzła atrybutu.

  • ("zmienna") - jest to nazwa tworzonego węzła atrybutów.

Przykład

Poniższy przykład (createattributenode_example.htm) analizuje dokument XML ( node.xml ) do obiektu XML DOM i tworzy nową sekcję węzła atrybutów w dokumencie 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>

W powyższym przykładzie -

  • create_a = xmlDoc.createAttribute ("Category") tworzy atrybut o nazwie <section>.

  • create_a.nodeValue = "Management" tworzy wartość "A" dla atrybutu <section>.

  • x [0] .setAttributeNode (create_a) ta wartość atrybutu jest ustawiona na element węzła <Employee> indeksowany na 0.