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
BCD tables only load in the 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.