HTML DOM - Elementos

Agregar, eliminar y reemplazar elementos HTML.

Crear un nuevo elemento HTML - createElement()

Para agregar un nuevo elemento al HTML DOM, primero debe crear ese elemento y luego añadirlo a un elemento existente.

Ejemplo

<div id="div1"> <p id="p1">Este es un párrafo.</p> <p id="p2">Este es otro párrafo.</p> </div> <script>var para=document.createElement("p"); var node=document.createTextNode("Este es un nuevo párrafo."); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para);</script>

Pruébalo »

Análisis del ejemplo

Este código crea un nuevo elemento <p>:

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

Para agregar texto al elemento <p>, primero debe crear un nodo de texto. Este código crea un nodo de texto:

var node=document.createTextNode("Este es un nuevo párrafo.");

Luego debe agregar el nodo de texto al elemento <p>:

para.appendChild(node);

Finalmente, debe agregar este nuevo elemento a un elemento existente.

Este código busca un elemento existente:

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

Este código agrega el nuevo elemento a ese elemento existente:

element.appendChild(para);

Crear un nuevo elemento HTML - insertBefore()

En el ejemplo anterior, el método appendChild() agrega el nuevo elemento como el último elemento hijo del elemento padre.

Si no desea esto, puede utilizar el método insertBefore():

Ejemplo

<div id="div1"> <p id="p1">Este es un párrafo.</p> <p id="p2">Este es otro párrafo.</p> </div> <script>var para=document.createElement("p"); var node=document.createTextNode("Este es un nuevo párrafo."); para.appendChild(node); var element=document.getElementById("div1"); var child=document.getElementById("p1"); element.insertBefore(para,child);</script>

Pruébalo »

Eliminar un elemento HTML existente

Para eliminar un elemento HTML, debe conocer el elemento padre de ese elemento:

Ejemplo

<div id="div1"> <p id="p1">Este es un párrafo.</p> <p id="p2">Este es otro párrafo.</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); </script>

Pruébalo »

Análisis del ejemplo

Este documento HTML contiene un elemento <div> con dos nodos secundarios (dos elementos <p>):

<div id="div1">

Este es un párrafo.


Este es otro párrafo.


</div>

Busque el elemento con id="div1":

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

Busque el elemento <p> con id="p1":

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

Elimine el elemento hijo del elemento padre:

parent.removeChild(child);

lamp ¿Puede eliminar un elemento sin hacer referencia a su elemento padre?
Lo sentimos. El DOM necesita conocer el elemento que desea eliminar y su elemento padre.

Aquí hay una solución común: encuentre el elemento hijo que desea eliminar y luego use la propiedad parentNode para encontrar su elemento padre:

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

Reemplazar elementos HTML

Para reemplazar un elemento en el HTML DOM, use el método replaceChild():

Ejemplo

<div id="div1"> <p id="p1">Este es un párrafo.</p> <p id="p2">Este es otro párrafo.</p> </div> <script>var parent=document.getElementById("div1"); var child=document.getElementById("p1"); var para=document.createElement("p"); var node=document.createTextNode("Este es un nuevo párrafo."); para.appendChild(node); parent.replaceChild(para,child);</script>

Pruébalo »
Otras extensiones