HTML DOM Element insertAdjacentHTML()

Insert a new element after a header element:

const h2 = document.getElementById("myH2");
let html = "My new paragraph.";
h2.insertAdjacentHTML("afterend", html);

Description

The insertAdjacentHTML() method inserts HTML code into a specified position.

Legal positions:

Value	Description
afterbegin	After the beginning of the element (first child)
afterend	After the element
beforebegin	Before the element
beforeend	Before the end of the element (last child)

element.insertAdjacentHTML( position, html)

node.insertAdjacentHTML( position, html)

Parameter	Description
position	Required. A position relative to the element: afterbegin afterend beforebegin beforeend
html	The HTML to insert.

Using "afterbegin":

let html = "My span"; h2.insertAdjacentHTML("afterbegin", html);

Using "beforebegin":

h2.insertAdjacentHTML("beforebegin", html);

Using "beforeend":

h2.insertAdjacentHTML("beforeend", html);

element.insertAjacentHTML() is supported in all browsers:


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes