Metodo insertAdjacentElement
Il metodo insertAdjacentElement consente
di inserire un elemento in qualsiasi punto della pagina.
Viene utilizzato più spesso dopo aver creato un elemento
con createElement.
Il codice viene inserito relativamente a un elemento
di riferimento. È possibile effettuare l'inserimento prima
dell'elemento di riferimento (modalità di inserimento beforeBegin),
dopo di esso (modalità di inserimento afterEnd),
così come all'inizio (modalità di inserimento afterBegin)
o alla fine (modalità di inserimento beforeEnd)
dell'elemento di riferimento.
Sintassi
elemento_di_riferimento.insertAdjacentElement(modalità_di_inserimento, codice_da_inserire);
Esempio . Modalità beforeBegin
Supponiamo che l'elemento di riferimento sia l'elemento #target.
Inseriamo un nuovo paragrafo prima di esso:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Risultato dell'esecuzione del codice:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Esempio . Modalità afterEnd
Ora inseriamo un nuovo paragrafo dopo l'elemento di riferimento:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Risultato dell'esecuzione del codice:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Esempio . Modalità afterBegin
Inseriamo un nuovo paragrafo all'inizio dell'elemento di riferimento:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Risultato dell'esecuzione del codice:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Esempio . Modalità beforeEnd
Inseriamo un nuovo paragrafo alla fine dell'elemento di riferimento:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Risultato dell'esecuzione del codice:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Vedi anche
-
metodo
insertAdjacentHTML,
che inserisce i tag in un punto specificato -
metodo
insertAdjacentText,
che inserisce il testo in un punto specificato -
metodo
prepend,
che inserisce elementi all'inizio -
metodo
append,
che inserisce elementi alla fine -
metodo
appendChild,
che inserisce elementi alla fine del genitore -
metodo
insertBefore,
che inserisce elementi prima di un elemento
