Outbook

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

Inicio que contiene a Desarrollo web que contiene a Inserción de elementos en Javascript: insertBefore y appendChild

Datos de búsqueda

Inserción de elementos en Javascript: insertBefore y appendChild

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

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay 4 comentarios a “Inserción de elementos en Javascript: insertBefore y appendChild”

guerratron dice:

Fecha de comentario: 2010/04/06 12:59

¿seguro que appendChild inserta un elemento al ‘FINAL’ de otro?…, creo que más bien ‘DENTRO’ de otro, sinó no sería hijo sujo… jejejjj , creo vamos… tampoco me hagas mucho caso…

jervert dice:

Fecha de comentario: 2010/04/06 23:31

Lo inserta dentro y al final del elemento. Si insertamos un elemento ‘A’ en un elemento ‘P’, y dicho elemento ‘P’ tiene previamente un elemento ‘EM’ anidado, el elemento ‘A’ se insertará después del elemento ‘EM’, es decir, al final del elemento ‘P’.

milthon dice:

Fecha de comentario: 2010/09/10 20:55

Muy bueno, pero tengo una duda, y si quiero añadir un elemento despues de otro pero que este elemento sea html?
que tengo que hacer.

ahmad dice:

Fecha de comentario: 2011/04/23 01:39

thank you so much
that really help

Información del sitio