Element.insertAdjacentHTML()

Descrizione

insertAdjacentHTML() esegue il parsing dello specifico testo espresso in HTML o XML e inserisce i nodi prodotti nella posizione specificata all'interno dell'albero DOM. Non viene rieseguito il parsing dell'elemento utilizzato, in modo tale da non modificare gli elementi esistenti al suo interno. Questo, anche evitando ulteriori passaggi intermedi di serializzazione, rende la manipolazione degli elementi più veloce rispetto a innerHTML.

Sinstassi

element.insertAdjacentHTML(position, text);

position è la posizione relativa all' element,  e può assumere una delle seguenti stringhe:

'beforebegin'

Prima dell'elemento stesso.

'afterbegin'

Dentro l'elemento, prima del suo primo figlio.

'beforeend'

Dentro l'elemento, dopo l'ultimo suo figlio.

'afterend'

Dopo l'elemento stesso

text è la stringa che deve essere analizzata come  HTML o XML e inserita nell'albero.

Uso dei valori position

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

Esempio

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// Questa è la nuova struttura:
// <div id="one">one</div><div id="two">two</div>

Specifiche

Supporto dei Browser

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Vedi Anche

• Node.insertBefore()
• Node.appendChild() (same effect as beforeend)
• hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.