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 beforebeginafterend 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

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

Compatibilità con i browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
insertAdjacentHTMLChrome Full support 1Edge Full support 17Firefox Full support 8IE Full support 4
Notes
Full support 4
Notes
Notes Before Internet Explorer 10, throws an "Invalid target element for this operation." error when called on a <table>, <tbody>, <thead>, or <tr> element.
Opera Full support 7Safari Full support 10WebView Android Full support 2.3Chrome Android Full support 18Firefox Android Full support 8Opera Android Full support YesSafari iOS Full support 4Samsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

Vedi anche

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: mdnwebdocs-bot, IsibisiDev, marcozanghi
Ultima modifica di: mdnwebdocs-bot,