Crear y añadir nodos

indice de ejemplos

En este ejemplo se van a usar métodos para agregar nuevos nodos al documento web de manera dinámica y modificar el atributo de un nodo.

Se pretende

  • Poner título a una página web (title)
  • Añadirle un titular o cabecera tipo h1
  • Añadir un párrafo
  • Poner un atributo de cursiva al párrafo (font-style: italic)

Solución

<script>

function crear(){

//crear title

var nodoTitle = document.createElement("title");

var txtTitle = document.createTextNode("Mi página dinámica");

nodoTitle.appendChild(txtTitle);

document.head.appendChild(nodoTitle);

//Crear la cabecera h1

var titularH1 = document.createElement("h1");

var txtTitular= document.createTextNode("Página creada on line");

titularH1.appendChild(txtTitular);

document.body.appendChild(titularH1);

//Crear el párrafo

var parrafoCur = document.createElement("p");

parrafoCur.setAttribute("style", "font-style: italic");

var txtParrafo = document.createTextNode("Ese es el contenido de mi párrafo. Está puesto en cursiva");

parrafoCur.appendChild(txtParrafo);

document.body.appendChild(parrafoCur);

}

</script>

En el cuerpo de la página colocamos la llamada a la función, en este caso con un evento load

<body onload="crear()">

Los nodos creados por Javascript aparecen en la página

</body>

Explicación

Partimos de una página web vacía sin contenido ni título. Fíjate que en la sección head no tiene la etiqueta title. Por tanto ese nodo no existe

El nodo body existe, pero está vacio, no contiene ningún elemento, es decir, no contiene nodos hijos (child).

El script está incrustrado en la sección head. Se ejecuta mediante un evento de carga de la página (body.onload).

El evento de dispara al cargarse (load) el elemento body y está asignado a la función crear. La asignación se hace mediante HTML.

El mecanismo del script es muy simple

  1. document.createElement("title" ); crea un elemento HTML del tipo pasado en el argumento. Se guarda en la variable nodoTitle
  2. document.createTextNode("Página dinámica"); crea un nodo de tipo texto para rellenar un nodo. Se guarda en la variable txtTitle
  3. nodoTitle.appendChild(txtTitle); se añade el nodo texto (txtTitle) al nodo que contiene el titulo (nodoTitle)
  4. document.head.appendChild(nodoTitle); se añade a la sección head el nodoTitle ya relleno.

Como ves el esquema es repetitivo. Se podría simplificar pero está así para que se vea más claro.

Ahora vamos a modificar un atributo, para eso se añade un atributo para el estilo (style). Como es algo relativo al nodoParrafo se usa un método del objeto nodo (parrafoCur)

  1. parrafoCur = document.createElement("p"); se crea el nodo párrafo
  2. parrafoCur.setAttribute("style", "font-style: italic"); poner un atributo a un nodo, al nodo parrafoCur
  3. var txtParrafo = document.createTextNode("..."); se crea un nodo texto con el texto que queramos que contenga en el argumento.
  4. parrafoCur.appendChild(txtParrafo); agregar el nodo texto al nodo párrafo.
  5. document.body.appendChild(parrafoCur), por último añadimos el nodo párafo al cuerpo (body) de document.

El esquema es así de simple: crear los nodos e ir agregándolos siguiendo el orden del árbol DOM de la página: de abajo-arriba según el orden jerárquico.

Es como montar una muñeca rusa: terminamos la muñeca interior, se pone en la que la contiene que también se completa y esta a su vez en la que la contiene ... así hasta llegar al nodo más alto, en este caso son head en un caso y body en el otro.