DOM XML - Agregar nodo

En este capítulo, discutiremos los nodos del elemento existente. Proporciona un medio para:

  • agregar nuevos nodos secundarios antes o después de los nodos secundarios existentes

  • insertar datos dentro del nodo de texto

  • agregar nodo de atributo

Los siguientes métodos se pueden usar para agregar / agregar los nodos a un elemento en un DOM:

  • appendChild()
  • insertBefore()
  • insertData()

añadir Niño()

El método appendChild () agrega el nuevo nodo secundario después del nodo secundario existente.

Sintaxis

La sintaxis del método appendChild () es la siguiente:

Node appendChild(Node newChild) throws DOMException

Dónde,

  • newChild : es el nodo a agregar

  • Este método devuelve el nodo agregado.

Ejemplo

El siguiente ejemplo (appendchildnode_example.htm) analiza un documento XML ( node.xml ) en un objeto DOM XML y agrega un nuevo PhoneNo secundario al elemento <FirstName>.

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

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

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

En el ejemplo anterior:

  • utilizando el método createElement (), se crea un nuevo elemento PhoneNo .

  • El nuevo elemento PhoneNo se agrega al elemento FirstName usando el método appendChild ().

Ejecución

Guarde este archivo como appendchildnode_example.htm en la ruta del servidor (este archivo y node.xml deben estar en la misma ruta en su servidor). En la salida, obtenemos el valor del atributo como PhoneNo .

insertBefore ()

El método insertBefore () , inserta los nuevos nodos secundarios antes que los nodos secundarios especificados.

Sintaxis

La sintaxis del método insertBefore () es la siguiente:

Node insertBefore(Node newChild, Node refChild) throws DOMException

Dónde,

  • newChild : es el nodo que se va a insertar

  • refChild : es el nodo de referencia, es decir, el nodo antes del cual se debe insertar el nuevo nodo.

  • Este método devuelve el nodo que se está insertando.

Ejemplo

El siguiente ejemplo (insertnodebefore_example.htm) analiza un documento XML ( node.xml ) en un objeto DOM XML e inserta un nuevo correo electrónico secundario antes del elemento especificado <Email>.

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

         x = xmlDoc.documentElement;
         y = xmlDoc.getElementsByTagName("Email");

         document.write("No of Email elements before inserting was: " + y.length);
         document.write("<br>");
         x.insertBefore(create_e,y[3]);

         y=xmlDoc.getElementsByTagName("Email");
         document.write("No of Email elements after inserting is: " + y.length);
      </script>
   </body>
</html>

En el ejemplo anterior:

  • utilizando el método createElement (), se crea un nuevo elemento Email .

  • El nuevo elemento Correo electrónico se agrega antes del elemento Correo electrónico mediante el método insertBefore ().

  • y.length da el número total de elementos agregados antes y después del nuevo elemento.

Ejecución

Guarde este archivo como insertnodebefore_example.htm en la ruta del servidor (este archivo y node.xml deben estar en la misma ruta en su servidor). Recibiremos el siguiente resultado:

No of Email elements before inserting was: 3
No of Email elements after inserting is: 4

insertData ()

El método insertData () inserta una cadena en el desplazamiento de unidad de 16 bits especificado.

Sintaxis

InsertData () tiene la siguiente sintaxis:

void insertData(int offset, java.lang.String arg) throws DOMException

Dónde,

  • desplazamiento : es el desplazamiento de caracteres en el que se inserta.

  • arg : es la palabra clave para insertar los datos. Incluye los dos parámetros offset y string entre paréntesis separados por comas.

Ejemplo

El siguiente ejemplo (addtext_example.htm) analiza un documento XML (" node.xml ") en un objeto DOM XML e inserta nuevos datos MiddleName en la posición especificada en el elemento <FirstName>.

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

        x = xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0];
        document.write(x.nodeValue);
        x.insertData(6,"MiddleName");
        document.write("<br>");
        document.write(x.nodeValue);

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

  • x.insertData(6,"MiddleName");- Aquí, x contiene el nombre del niño especificado, es decir, <FirstName>. Luego insertamos en este nodo de texto los datos "MiddleName" comenzando desde la posición 6.

Ejecución

Guarde este archivo como addtext_example.htm en la ruta del servidor (este archivo y node.xml deben estar en la misma ruta en su servidor). Recibiremos lo siguiente en la salida:

Tanmay
TanmayMiddleName