Open In App
Related Articles

HTML DOM insertAdjacentElement() Method

Improve Article
Save Article
Like Article

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 1 and above
  • Edge 17 and above
  • Firefox 48 and above
  • Opera 8 and above
  • Internet Explorer 5 and above
  • Safari 3 and above
Last Updated : 13 Jun, 2023
Like Article
Save Article
Similar Reads
Related Tutorials