Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Insert a specified element in a specified position in JavaScript?
In JavaScript, the insertAdjacentElement() method allows you to insert an existing DOM element at a specific position relative to another element. This method is useful for dynamically rearranging elements without removing them from the DOM first.
Syntax
element.insertAdjacentElement(position, elementToInsert);
Parameters
element - The target element where the new element will be positioned relative to
-
position - A string specifying where to insert the element. Four possible values:
-
'beforebegin'- Before the target element -
'afterbegin'- Inside the target element, as the first child -
'beforeend'- Inside the target element, as the last child -
'afterend'- After the target element
-
elementToInsert - The DOM element to be inserted
Example 1: Using beforebegin
Insert an element before the target element:
<!DOCTYPE html>
<html>
<head>
<title>insertAdjacentElement - beforebegin</title>
</head>
<body>
<p id="target">This is the target paragraph.</p>
<span id="moveMe">I will be moved before the target!</span>
<script>
var targetElement = document.getElementById('target');
var elementToMove = document.getElementById('moveMe');
targetElement.insertAdjacentElement("beforebegin", elementToMove);
</script>
</body>
</html>
Example 2: Using afterbegin
Insert an element as the first child inside the target element:
<!DOCTYPE html>
<html>
<head>
<title>insertAdjacentElement - afterbegin</title>
</head>
<body>
<div id="target">
<p>Existing content</p>
</div>
<span id="moveMe">I will be the first child!</span>
<script>
var targetElement = document.getElementById('target');
var elementToMove = document.getElementById('moveMe');
targetElement.insertAdjacentElement("afterbegin", elementToMove);
</script>
</body>
</html>
Example 3: Using beforeend
Insert an element as the last child inside the target element:
<!DOCTYPE html>
<html>
<head>
<title>insertAdjacentElement - beforeend</title>
</head>
<body>
<div id="target">
<p>Existing content</p>
</div>
<span id="moveMe">I will be the last child!</span>
<script>
var targetElement = document.getElementById('target');
var elementToMove = document.getElementById('moveMe');
targetElement.insertAdjacentElement("beforeend", elementToMove);
</script>
</body>
</html>
Example 4: Using afterend
Insert an element after the target element:
<!DOCTYPE html>
<html>
<head>
<title>insertAdjacentElement - afterend</title>
</head>
<body>
<p id="target">This is the target paragraph.</p>
<span id="moveMe">I will be moved after the target!</span>
<script>
var targetElement = document.getElementById('target');
var elementToMove = document.getElementById('moveMe');
targetElement.insertAdjacentElement("afterend", elementToMove);
</script>
</body>
</html>
Key Points
The method moves existing elements rather than creating new ones
Returns the inserted element on success, or
nullif insertion failedThe element is removed from its current position and moved to the new position
Works with any DOM element, not just HTML elements
Browser Compatibility
The insertAdjacentElement() method is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 8+.
Conclusion
The insertAdjacentElement() method provides a flexible way to reposition existing DOM elements. Use the four position options to precisely control where elements are inserted relative to your target element.
2K+ Views
