Javascript para novatos 22º: Crear nuevo nodos en el DOM

Crear un nuevo nodo

En primer lugar, antes de añadir el nodo debemos crearlo, para ello tenemos dos métodos.

Método createElement()

Este método crea un nodo de tipo «element». A través del parámetro le indicaremos que clase de elemento HTML es (div, p, ul, . . ).

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

Acabamos de crear un elemento <h1> y lo hemos asignado a la variable «nuevoElemento».

createElement() es un método de document.

Método createTextNode()

Con él podemos crear un nodo de tipo «text». A través del parámetro introduciremos el texto que contendrá.

var textoDelElemento = document.createTextNode("Nuevo texto");

En este último código hemos creado un nodo tipo «text» con el contenido «Nuevo texto» y lo hemos asignado a la variable «textoDelElemento».

createTextNode() es un método de document.

Añadir un nodo:

Una vez que hemos creado el nodo ya podemos añadirlo al documento, veamos cómo hacerlo.

Método appendChild()

Con él podremos añadir un nodo como hijo de otro. En caso de que haya más hijos el nodo se añadirá en última posición.

nodoPadre.appendChild(nodoHijo);

Es común utilizarlo al menos dos veces, una para añadir el nodo «text» como hijo del nodo «element» y otra para añadir el nodo «element» como hijo de algún nodo del documento. Probemos con un ejemplo utilizando los nodos creados en los ejemplos anteriores.

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

var textoDelElemento = document.createTextNode("Nuevo texto"); 

nuevoElemento.appendChild(textoDelElemento);  // Añadimos el nodo "textoDelElemento" como hijo de "nuevoElemento"

document.body.appendChild(nuevoElemento);  // Añadimos "nuevoElemento" como hijo de body

// 22.1

En este ejemplo primero hemos creado un elemento <h1> y un nodo «text» con el texto «Nuevo texto».

Después con appendChild() hemos añadido el nodo de tipo «text» como hijo del nodo «element». Lo que en HTML será <h1>Nuevo texto</h1>.

Por último, hemos añadido también con appendChild el nodo de tipo «element» que a su vez contiene el nodo de tipo «text» al body del documento.

appendChild() es un método aplicable a todos los elementos HTML.

Método insertBefore()

Con él podremos añadir un nodo como hijo de otro, pero a diferencia de «appendChild()» podremos elegir la posición, tan solo debemos indicarle delante de que nodo se colocará.

Practiquemos con un ejemplo.

<ul>
       <li>Ford</li>
       <li>Maserati</li>
       <li>Seat</li>
</ul>

<script>

       var nuevoElemento = document.createElement("li");

       var textoDelElemento = document.createTextNode("Renault"); 

       nuevoElemento.appendChild(textoDelElemento); 

       var segundoElemento = document.getElementsByTagName("li")[1];    // accedemos a "segundoElemento"        

       var elementoPadre = document.getElementsByTagName("ul")[0];  // accedemos a "elementoPadre"

       elementoPadre.insertBefore(nuevoElemento, segundoElemento);  // Añadimos "nuevoElemento" delante de "segundoElemento"

</script>

// 22.2

En este último ejemplo hemos creado dos variables, una con el segundo elemento y otra con el elemento padre.

En la última línea de código, desde «elementoPadre» hemos llamado al método «insertBefore» y le hemos pasado dos parámetros, el primero para indicarle que inserte «nuevoElemento» y el segundo para que añada «nuevoElemento» antes de «segundoElemento».

insertBefore() es un método aplicable a todos los elementos HTML.

Si en este capítulo hemos visto como crear nuevos elementos en un documento, en el próximo veremos cómo eliminarlos.

 

 

---

Ir a Javascript para novatos 23º parte