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 adelement
; deve essere una delle seguenti stringhe:'beforebegin'
: Davanti adelement
stesso.'afterbegin'
: Appena dentroelement
, prima del suo primo figlio.'beforeend'
: Appena dentroelement
, prima del suo ultimo figlio.'afterend'
: Dopo adelement
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
-->
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
Specifica | Stato | Commento |
---|---|---|
DOM Parsing and Serialization The definition of 'Element.insertAdjacentHTML()' in that specification. |
Working Draft |
Compatibilità con i browser
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
insertAdjacentHTML | Chrome Full support 1 | Edge
Full support
18
| Firefox Full support 8 | IE
Full support
4
| Opera Full support 7 | Safari Full support 10 | WebView Android Full support 2.3 | Chrome Android Full support 18 | Firefox Android Full support 8 | Opera Android Full support Yes | Safari iOS Full support 4 | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.
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.