Metodo insertAdjacentHTML() della HTML DOM

insertAdjacentHTML()Il metodo analizza il testo specificato come HTML e inserisce il nodo risultante nella posizione specificata.

Questo metodo non rielabora l'elemento utilizzato, quindi non danneggia gli elementi esistenti all'interno dell'elemento.

Questo evita la sequenza di serializzazione aggiuntiva, rendendolo più veloce rispetto al direttoinnerHTMLoperazione molto più veloce.

Sintassi:

element.insertAdjacentHTML(position, text)

Esempio

var head = document.getElementsByTagName("h2")[0];
head.insertAdjacentHTML("afterend", "<span>Hello world</span>");

I numeri nella tabella specificano la versione del browser che supporta completamente il metodo insertAdjacentHTML() per la prima volta:

Metodo
insertAdjacentHTML()	È	48	È	È	8

Parametro	Descrizione
position	Posizione rispetto all'elemento. Valore legale: "afterbegin" - dopo l'inizio dell'elemento (come primo figlio) "afterend" - dopo l'elemento "beforebegin" - prima dell'elemento "beforeend" - prima dell'elemento (come ultimo figlio)
text	Stringa da解析 come HTML

Utilizzare il valore "beginbegin":

Esempio

var head = document.getElementsByTagName("h2")[0];
head.insertAdjacentHTML("afterbegin", "<span style='color:red;'>Hello world</span>");

Usando il valore “beforebegin”:

Esempio

var head = document.getElementsByTagName("h2")[0];
head.insertAdjacentHTML("beforebegin", "<span style='color:red;'>Hello world</span>");

Usando il valore “beforeend”:

Esempio

var head = document.getElementsByTagName("h2")[0];
head.insertAdjacentHTML("beforeend", "<span style='color:red;'>Hello world</span>");