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() (en-US). Questo non interpreta il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.

Specifiche

Specifica Stato Commento
DOM Parsing and Serialization
The definition of 'Element.insertAdjacentHTML()' in that specification.		 Working Draft  

Compatibilità con i browser

BCD tables only load in the browser

Vedi anche