Acceder a los nodos y a sus propiedades (que se verá más adelante) es sólo una parte de las manipulaciones habituales en las páginas. Las otras operaciones habituales son las de crear y eliminar nodos del árbol DOM, es decir, crear y eliminar “trozos” de la página web.
5.4.1. Creación de elementos XHTML simples
Como se ha visto, un elemento XHTML sencillo, como por ejemplo un párrafo, genera dos nodos: el primer nodo es de tipo Element y representa la etiqueta <p> y el segundo nodo es de tipo Text y representa el contenido textual de la etiqueta <p>.
Por este motivo, crear y añadir a la página un nuevo elemento XHTML sencillo consta de cuatro pasos diferentes:
- Creación de un nodo de tipo
Elementque represente al elemento. - Creación de un nodo de tipo
Textque represente el contenido del elemento. - Añadir el nodo
Textcomo nodo hijo del nodoElement. - Añadir el nodo
Elementa la página, en forma de nodo hijo del nodo correspondiente al lugar en el que se quiere insertar el elemento.
De este modo, si se quiere añadir un párrafo simple al final de una página XHTML, es necesario incluir el siguiente código JavaScript:
// Crear nodo de tipo Element var parrafo = document.createElement("p"); // Crear nodo de tipo Text var contenido = document.createTextNode("Hola Mundo!"); // Añadir el nodo Text como hijo del nodo Element parrafo.appendChild(contenido); // Añadir el nodo Element como hijo de la pagina document.body.appendChild(parrafo);
El proceso de creación de nuevos nodos puede llegar a ser tedioso, ya que implica la utilización de tres funciones DOM:
-
createElement(etiqueta): crea un nodo de tipoElementque representa al elemento XHTML cuya etiqueta se pasa como parámetro. -
createTextNode(contenido): crea un nodo de tipoTextque almacena el contenido textual de los elementos XHTML. -
nodoPadre.appendChild(nodoHijo): añade un nodo como hijo de otro nodo. Se debe utilizar al menos dos veces con los nodos habituales: en primer lugar se añade el nodoTextcomo hijo del nodoElementy a continuación se añade el nodoElementcomo hijo de algún nodo de la página.






