Capítulo 41: Crear nuevos nodos en el DOM

Contenido:

Los cambios en el DOM no aceptan al documento original; Añadir nuevos nodos al DOM; Dos pasos: crear el nodo y añadirlo al árbol DOM; Uso del Método createElement; Uso del Método createTextNode para crear Nodos de texto; Clonar elementos ya existentes con el Método cloneNode

Para añadir nuevos elementos en el DOM hay que realizar dos pasos:

1. Crear el nodo utilizando el método createElement() ó el método createTextNode(). También podemos clonar un elemento existente usando el método cloneNode() (Si añadimos true también clonará los nodos hijo).
2. Añadimos el nuevo nodo en la localización deseada

Ejemplo:

<div id=”id1”>”Este es el contenido del DIV con id = id1</div>

<script>

    var nuevoDiv = document.createElement(“div”);

var nuevoNodoTexto = document.createTextNode(“Aquí está el Texto”);

var miDiv = document.getElementById(“id1”);

var cloneDiv = MiDiv.cloneNode(true);

</script>

Cuando clonamos un nodo, también va a tener la misma id que el nodo original así que debe cambiarse.