Element.insertAdjacentHTML()

Il metodo insertAdjacentHTML() dell'interfaccia Element analizza il testo specificato come HTML o XML e inserisce i nodi risultanti nell'albero DOM in una posizione specificata. Non esegue il reparse dell'elemento su cui viene utilizzato, e quindi non corrompe gli elementi esistenti all'interno di quell'elemento. Questo evita il passaggio extra della serializzazione, rendendolo molto più veloce della manipolazione diretta di innerHTML.

Sintassi

element.insertAdjacentHTML(position, text);

Parametri

position

Una DOMString che rappresenta la posizione relativa ad element; deve essere una delle seguenti stringhe:

• 'beforebegin': Davanti ad element stesso.
• 'afterbegin': Appena dentro element, prima del suo primo figlio.
• 'beforeend': Appena dentro element, prima del suo ultimo figlio.
• 'afterend': Dopo ad element stesso.

text

La stringa da analizzare come HTML o XML e inserita nell'albero.

Visualizzazione dei nomi delle posizioni

<!-- 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>');

// A questo punto, la nuova struttura è:
// <div id="one">one</div><div id="two">two</div>

Note

Considerazioni sulla sicurezza

Quando si inserisce HTML in una pagina utilizzando insertAdjacentHTML(), fare attenzione a non utilizzare l'input dell'utente che non è stato analizzato.

Non è consigliabile utilizzare  insertAdjacentHTML() quando si inserisce testo normale; usa invece la proprietà Node.textContent o il metodo Element.insertAdjacentText(). Questo non interpreta il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.

Specifiche

Compatibilità con i browser

Vedi anche

• Element.insertAdjacentElement()
• Element.insertAdjacentText()
• XMLSerializer: Costruire una rappresentazione DOM del testo XML
• hacks.mozilla.org guest post di Henri Sivonen, incluso benchmark che mostra che insertAdjacentHTML può essere molto più veloce in alcuni casi.