HTML DOM insertAdjacentHTML() method

insertAdjacentHTML()This method parses the specified text as HTML and inserts the resulting node at the specified position.

This method does not reparse the element being used, so it does not destroy the existing elements within the element.

This avoids additional serialization steps, making it faster than directinnerHTMLFaster operation.

Syntax:

element.insertAdjacentHTML(position, text)

Example

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

The numbers in the table specify the first browser version that fully supports the insertAdjacentHTML() method:

Method
insertAdjacentHTML()	is	48	is	is	8

Parameter	Description
position	Relative position to the element. Legal value: "afterbegin"-after the start of the element (as the first child) "afterend"-after the element "beforebegin"-before the element "beforeend"-before the end of the element (as the last child)
text	String to be parsed as HTML

Using the "beginbegin" value:

Example

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

Using the "beforebegin" value:

Example

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

Using the "beforeend" value:

Example

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