Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Insert a specified element in a specified position in JavaScript?
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>, <p>, <strong>, <span>) 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>, <p>, <strong>, <span>) 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.
1K+ Views
