The **`insertAdjacentElement`** method inserts an element at a given position, respective to the element at which `insertAdjacentElement` is called.

# Syntax

```
targetElement.insertAdjacentElement(position, elementToBeInserted);
```

The position values can be: 

* `beforebegin`: The new element will be inserted before the `targetElement`.
* `afterbegin`: The new element will be inserted before the first child of the `targetElement`.
* `beforeend`: The new element will be inserted after the last child of the `targetElement`. 
* `afterend`: The new element will be inserted after the `targetElement`.

----
Let's create a page with an unordered list as the parent and a list as the child, and then we'll try to implement `insertAdjacentElement` using all four position values.

---

# beforebegin

When we use `beforebegin` as the position of the new element, the new element will be inserted *before* the `targetElement`.

```
targetElement.insertAdjacentElement('beforebegin', elementToBeInserted);
```

<html>
 <head>
 </head>
 <body>
    <ul>
      <li>Child 1</li>
      <li>Child 2</li>
      <li>Child 3</li>
    </ul>
    <button>Insert Before ul</button>
 </body>
</html>

// we need to add a new element to the ul so it is the target element
let targetElement = document.querySelector("ul");
let btn = document.querySelector("button");

function getNewList(){
  let newlist = document.createElement("li");
  newlist.textContent = "Inserted Before ul";
  return newlist;
}
btn.addEventListener("click", ()=>{
  let newList = getNewList();
  targetElement.insertAdjacentElement('beforebegin', newList);
});



ul{
  border : 3px solid black;
  box-sizing: border-box;
  width :212px;
  list-style :none;
  padding: 3px;
  
}
li{
  color : white;
  text-align : center;
  width :200px;
  height : 30px;
  line-height : 30px;
   margin-bottom : 5px;
  box-sizing: border-box;
}

li:nth-child(even){
     background : lightblue;
}
li:nth-child(odd){
    background : pink;
}

codemirror

# afterbegin

When we use `afterbegin` as the position of the new element, the new element will be inserted *before the first child* of the `targetElement`. 

```
targetElement.insertAdjacentElement('afterbegin', elementToBeInserted);
```

<html>
 <head>
 </head>
 <body>
    <ul>
      <li>Child 1</li>
      <li>Child 2</li>
      <li>Child 3</li>
    </ul>
    <button>Insert before first child of ul</button>
 </body>
</html>

// we need to add a new element to the ul so it is the target element
let targetElement = document.querySelector("ul");
let btn = document.querySelector("button");

function getNewList(){
  let newlist = document.createElement("li");
  newlist.textContent = "Inserted before First child of ul";
  return newlist;
}
btn.addEventListener("click", ()=>{
  let newList = getNewList();
  targetElement.insertAdjacentElement('afterbegin', newList);
});




ul{
  border : 3px solid black;
  box-sizing: border-box;
  width :212px;
  list-style :none;
  padding: 3px;
  
}
li{
  color : white;
  text-align : center;
  width :200px;
  height : 30px;
  line-height : 30px;
   margin-bottom : 5px;
  box-sizing: border-box;
}

li:nth-child(odd){
     background : pink;
}
li:nth-child(even){
    background : lightblue;
}

# beforeend

When we use `beforeend` as the position of the new element, then the new element will be inserted *after the last child* of the `targetElement`.
```
targetElement.insertAdjacentElement('beforeend', elementToBeInserted);
```

<html>
 <head>
 </head>
 <body>
    <ul>
      <li>Child 1</li>
      <li>Child 2</li>
      <li>Child 3</li>
    </ul>
    <button>Insert after last child of ul</button>
 </body>
</html>

// we need to add a new element to the ul so it is the target element
let targetElement = document.querySelector("ul");
let btn = document.querySelector("button");

function getNewList(){
  let newlist = document.createElement("li");
  newlist.textContent = "Inserted After last child of ul";
  return newlist;
}
btn.addEventListener("click", ()=>{
  let newList = getNewList();
  targetElement.insertAdjacentElement('beforeend', newList);
});

ul{
  border : 3px solid black;
  box-sizing: border-box;
  width :212px;
  list-style :none;
  padding: 3px;
  
}
li{
  color : white;
  text-align : center;
  width :200px;
  height : 30px;
  line-height : 30px;
   margin-bottom : 5px;
  box-sizing: border-box;
}

li:nth-child(odd){
     background : pink;
}
li:nth-child(even){
    background : lightblue;
}

# afterend
When we use `afterend` as the position of the new element, the new element will be inserted *after* the `targetElement`.
```
targetElement.insertAdjacentElement('afterend', elementToBeInserted);
```

<html>
 <head>
 </head>
 <body>
    <ul>
      <li>Child 1</li>
      <li>Child 2</li>
      <li>Child 3</li>
    </ul>
    <button>Insert after ul</button>
 </body>
</html>

// we need to add a new element to the ul so it is the target element
let targetElement = document.querySelector("ul");
let btn = document.querySelector("button");

function getNewList(){
  let newlist = document.createElement("li");
  newlist.textContent = "Inserted After ul";
  return newlist;
}
btn.addEventListener("click", ()=>{
  let newList = getNewList();
  targetElement.insertAdjacentElement('afterend', newList);
});

What is insertAdjacentElement in JavaScript?

Syntax

beforebegin

afterbegin

beforeend

afterend