Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM insertAdjacentElement() Method

  • Last Updated : 25 Jul, 2019

The insertAdjacentElement() method inserts the specified element at the specified position.
The legal values for this position are.

  • afterbegin
  • afterend
  • beforebegin
  • beforeend


node.insertAdjacentElement(position, element)

Parameters: This method requires 2 parameters.

  • position: A position relative to the element. The legal values are :-
    1. afterbegin: Just inside the element, before its first child.
    2. afterend: After the element itself.
    3. beforebegin: Before the element itself.
    4. beforeend: Just inside the element, after its last child.
  • element: The element you want to insert.

Return Value: The element that was inserted, or null, if the insertion failed.

Exceptions: If the specified position is not recognized or if the specified element is not a valid element.


<!DOCTYPE html>
    <!--script to insert specified
        element to the specified position-->
        function insadjele() {
            var s = document.getElementById("d1");
            var h = document.getElementById("head3");
            h.insertAdjacentElement("afterend", s);
    <h1> Welcome To GeeksforGeeks</h1>
    <div id="d1">div element</div>
    <h3 id="head3">header element</h3>
    <p>Click the button to insert 
      div element after the header element</p>
    <button onclick="insadjele()">Insert element</button>


Before clicking insert element button:

After clicking insert element button:

Supported Browsers: The browser supported by DOM insertAdjacentElement() Method are listed below:

  • Google Chrome
  • Firefox
  • Opera
  • Internet Explorer
  • Safari

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!