e) Crear nodos

Creación de nuevos elementos HTML (nodos)

Para añadir un nuevo elemento a la DOM de HTML, se debe crear el elemento (nodo de elemento) en primer lugar y, a continuación, añadir a un elemento existente.

Ejemplo

<div id="div1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

<script>

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

var node = document.createTextNode("This is new.");

para.appendChild(node);

var element = document.getElementById("div1");

element.appendChild(para);

</script>

Inténtalo tú mismo "

La creación de nuevos elementos HTML - insertBefore ()

El método appendChild () en el ejemplo anterior, añade el nuevo elemento como el último hijo de los padres.

Si no desea que se puede utilizar el método insertBefore ():

Ejemplo

<div id="div1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

<script>

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

var node = document.createTextNode("This is new.");

para.appendChild(node);

var element = document.getElementById("div1");

var child = document.getElementById("p1");

element.insertBefore(para, child);

</script>

Inténtalo tú mismo "

Borrado de elementos HTML existentes

Para eliminar un elemento HTML, se debe conocer el padre del elemento:

Ejemplo

<div id="div1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

<script>

var parent = document.getElementById("div1");

var child = document.getElementById("p1");

parent.removeChild(child);

</script>

Inténtalo tú mismo "

El node.remove método () está implementado en la especificación DOM 4.

Sin embargo, debido a la mala soporte de los navegadores, no debe usarlo.