THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML DOM insertAdjacentElement() Method

Element Object

Example

Move a span element to after the header element:

var s = document.getElementById("mySpan");
var h = document.getElementById("myH2");
h.insertAdjacentElement("afterend", s);
Try it Yourself »

Definition and Usage

The insertAdjacentElement() method inserts a the specified element into a specified position.

Legal position values are:

"afterbegin"
"afterend"
"beforebegin"
"beforeend"


Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
insertAdjacentElement() Yes 8 48 Yes Yes

Syntax

node.insertAdjacentElement(position, element)

Parameter Values

Parameter Type Description
position String Required. A position relative to the element.
Legal values:
"afterbegin" - After the beginning 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)
element HTML Element The element you want to insert


More Examples

Example

Using the "afterbegin" value:

var s = document.getElementById("mySpan");
var h = document.getElementById("myH2");
h.insertAdjacentElement("afterbegin", s);
Try it Yourself »

Example

Using the "beforebegin" value:

var s = document.getElementById("mySpan");
var h = document.getElementById("myH2");
h.insertAdjacentElement("afterbegin", s);
Try it Yourself »

Example

Using the "beforeend" value:

var s = document.getElementById("mySpan");
var h = document.getElementById("myH2");
h.insertAdjacentElement("afterbegin", s);
Try it Yourself »

Element Object