Insert a specified element in a specified position in JavaScript?

Javascript Web Development Front End Technology

The given task to perform in this article is to insert a specified element in a specified position in JavaScript.

The Javascript has provided "insertAdjacentElement()" to insert an already existing element in a specified position. There are four specified legal positions. The first position is ‘afterbegin’ (After the beginning of the element (first child)), the second is ‘afterend’ (After the element), third is ‘beforebegin’ (Before the element) and the fourth legal position is ‘beforeend’ (Before the end of the element (last child)).

If there are multiple elements with the same name, then use indexes to access them as we access the array elements.

Syntax

The syntax to insert a specified HTML text into a specified position using insertAdjacentElement() method is −

element.insertAdjacentElement(position, item);

Where,

Element is the old HTML element (<a>, , , ) where the other element needs to be inserted.
Position is the position where the text needs to be added. There are four possible options – beforebegin, afterbegin, beforeend, afterend.
Item is the new HTML element (<a>, , , ) which is to be added to the old HTML element.

Example 1

This is an example program to insert a specified element into a specified position using beforebegin in the JavaScript document.

<!DOCTYPE html>
<html>
<head>
   <title>Insert a specified element in a specified position in JavaScript</title>
</head>
<body style="text-align: center;">
   <h4>Insert a specified element in a specified position in JavaScript using insertAdjacentElement()</h4>
   <p id="p1">Education is the passport to the future, for tomorrow belongs to those who prepare for it today.</p>
   <span id="p2"> The roots of education are bitter, but the fruit is sweet. </span>
   <p id="p3">Change is the end result of all true learning.</p>
   <script>
      var ele1 = document.getElementById('p2');
      var ele2 = document.getElementById('p3');
      ele2.insertAdjacentElement("beforebegin", ele1);
   </script>
</body>
</html>

The output for the above example program is −

Example 2

This is an example program to insert a specified element into a specified position using afterbegin in the JavaScript document.

<!DOCTYPE html>
<html>
<head>
   <title>Insert a specified element in a specified position in JavaScript</title>
</head>
<body style="text-align: center;">
   <h4>Insert a specified element in a specified position in JavaScript using insertAdjacentElement()</h4>
   <p id="p1">Education is the passport to the future, for tomorrow belongs to those who prepare for it today.</p>
   <span id="p2"> The roots of education are bitter, but the fruit is sweet. </span>
   <p id="p3">Change is the end result of all true learning.</p>
   <script>
      var ele1 = document.getElementById('p2');
      var ele2 = document.getElementById('p3');
      ele2.insertAdjacentElement("afterbegin", ele1);
   </script>
</body>
</html>

The output for the above example program is −

Example 3

This is an example program to insert a specified element into a specified position using beforeend in the JavaScript document.

<!DOCTYPE html>
<html>
<head>
   <title>Insert a specified element in a specified position in JavaScript</title>
</head>
<body style="text-align: center;">
   <h4>Insert a specified element in a specified position in JavaScript using insertAdjacentElement()</h4>
   <p id="p1">Education is the passport to the future, for tomorrow belongs to those who prepare for it today.</p>
   <span id="p2"> The roots of education are bitter, but the fruit is sweet. </span>
   <p id="p3">Change is the end result of all true learning.</p>
   <script>
      var ele1 = document.getElementById('p2');
      var ele2 = document.getElementById('p3');
      ele2.insertAdjacentElement("beforeend", ele1);
   </script>
</body>
</html>

The output for the above example program is −

Example 4

This is an example program to insert a specified element into a specified position using afterend in the JavaScript document.

<!DOCTYPE html>
<html>
<head>
   <title>Insert a specified element in a specified position in JavaScript</title>
</head>
<body style="text-align: center;">
   <h4>Insert a specified element in a specified position in JavaScript using insertAdjacentElement()</h4>
   <p id="p1">Education is the passport to the future, for tomorrow belongs to those who prepare for it today.</p>
   <span id="p2"> The roots of education are bitter, but the fruit is sweet.</span>
   <p id="p3">Change is the end result of all true learning.</p>
   <script>
      var ele1 = document.getElementById('p2');
      var ele2 = document.getElementById('p3');
      ele2.insertAdjacentElement("afterend", ele1);
   </script>
</body>
</html>

On executing the above code, the below output is generated.