- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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.
- Related Articles
- Insert a specified HTML text into a specified position in the JavaScript document?
- Insert the specified element at the specified position in Java CopyOnWriteArrayList
- In MySQL, how can we insert a substring at the specified position in a string?
- Insert an element into Collection at specified index in C#
- Swift Program to Insert an Element in an Array at a Specified Index
- Insert an element into the ArrayList at the specified index in C#
- Remove the specified element from a HashSet in C#
- Java Program to remove a character at a specified position
- The listIterator() method AbstractList class in Java at a specified position
- Insert at the specified index in StringCollection in C#
- Insert a new entry in OrderedDictionary with specified key and value in C#
- The listIterator() method of CopyOnWriteArrayList in Java starting at a specified position
- Check if a HashSet contains the specified element in C#
- How to set a value to the element at the specified position in the one-dimensional array in C#
- Remove specified element from HashSet in Java
