Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a

Datos de búsqueda

Etiqueta ‘appendChild’

Inserción de elementos en Javascript: insertBefore y appendChild

Fecha de publicación: 2008/02/11

Método appendChild

El método appendChild permite insertar un elemento al final de otro.

Supongamos que tenemos este HTML:

<div>
 <p id="existente">Elemento existente</p>
</div>

Y queremos que pase a ser así:

<div id="contenedor">>
 <p id="existente">Elemento existente</p>
 <p id="nuevo">Elemento nuevo</p>
</div>

No habría más que utilizar el siguiente código Javascript:

elemento1 = document.createElement('p');
elemento1.appendChild(document.createTextNode('Elemento nuevo'));
elemento1.id = 'nuevo';
elemento2 = document.getElementById('contenedor');
elemento2.appendChild(elemento1);

Método insertBefore (o insert before)

El método insertBefore tiene una función similar a appendChild, solo que no inserta el elemento hijo justo al final del elemento padre, sino antes de un elemento concreto que hay que especificar.

Supongamos que tenemos este HTML:

<div>
 <p id="existente">Elemento existente</p>
</div>

Y queremos que pase a ser así:

<div>
 <p id="nuevo">Elemento nuevo</p>
 <p id="existente">Elemento existente</p>
</div>

No habría más que utilizar el siguiente código Javascript:

elemento1 = document.createElement('p');
elemento1.appendChild(document.createTextNode('Elemento nuevo'));
elemento1.id = 'nuevo';
elemento2 = document.getElementById('existente');
elemento2.parentNode.insertBefore(elemento1,elemento2);

Saber más

Datos del artículo:

Información del sitio