Método insertAdjacentElement
El método insertAdjacentElement permite
insertar un elemento en cualquier lugar de la página.
Se usa más frecuentemente después de crear un elemento
con createElement.
El código se inserta relativamente al elemento de
referencia. Se puede hacer la inserción antes
del elemento de referencia (método de inserción beforeBegin),
después de él (método de inserción afterEnd),
también al principio (método de inserción afterBegin)
o al final (método de inserción beforeEnd)
del elemento de referencia.
Sintaxis
elemento de referencia.insertAdjacentElement(método de inserción, código para insertar);
Ejemplo . Método beforeBegin
Sea el elemento de referencia el elemento #target.
Insertemos antes de él un nuevo párrafo:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Resultado de ejecutar el código:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Ejemplo . Método afterEnd
Y ahora insertemos un nuevo párrafo después del elemento de referencia:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Resultado de ejecutar el código:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Ejemplo . Método afterBegin
Insertemos un nuevo párrafo al principio del elemento de referencia:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Resultado de ejecutar el código:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Ejemplo . Método beforeEnd
Insertemos un nuevo párrafo al final del elemento de referencia:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Resultado de ejecutar el código:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Véase también
-
método
insertAdjacentHTML,
que inserta etiquetas en el lugar especificado -
método
insertAdjacentText,
que inserta texto en el lugar especificado -
método
prepend,
que inserta elementos al principio -
método
append,
que inserta elementos al final -
método
appendChild,
que inserta elementos al final del padre -
método
insertBefore,
que inserta elementos antes del elemento
