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 -->
Note: Le posizioni beforebegin e afterend funzionano solo se il nodo si trova nell'albero del DOM e ha un elemento padre.

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

BCD tables only load in the browser

Vedi anche