HTML DOM insertAdjacentElement() Method

Last Updated : 13 Jun, 2023

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

afterbegin
afterend
beforebegin
beforeend

Syntax:

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.

Example:

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <!--script to insert specified 
        element to the specified position-->
    <script> 
        function insadjele() { 
            var s = document.getElementById("d1"); 
            var h = document.getElementById("head3"); 
            
            h.insertAdjacentElement("afterend", s); 
        } 
    </script> 
</head> 
  
<body> 
    <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> 
  
</body> 
</html>