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 HTML text into a specified position in the JavaScript document?
The insertAdjacentHTML() method allows you to insert HTML content at specific positions relative to an existing element in the DOM. This method provides four position options and is more efficient than using innerHTML for adding content.
Syntax
element.insertAdjacentHTML(position, text);
Parameters
element ? The target HTML element where content will be inserted
position ? One of four values: "beforebegin", "afterbegin", "beforeend", "afterend"
text ? The HTML string to insert
Position Options Explained
Example 1: Using beforebegin
Inserts HTML before the target element (as a sibling):
<!DOCTYPE html>
<html>
<head>
<title>beforebegin Example</title>
</head>
<body>
<div id="target">Original content</div>
<script>
var element = document.getElementById('target');
element.insertAdjacentHTML("beforebegin", "<p>Inserted before the target element</p>");
</script>
</body>
</html>
Example 2: Using afterbegin
Inserts HTML just inside the target element, before its first child:
<!DOCTYPE html>
<html>
<head>
<title>afterbegin Example</title>
</head>
<body>
<div id="target">Original content</div>
<script>
var element = document.getElementById('target');
element.insertAdjacentHTML("afterbegin", "<span>Inserted at the beginning: </span>");
</script>
</body>
</html>
Example 3: Using beforeend
Inserts HTML just inside the target element, after its last child:
<!DOCTYPE html>
<html>
<head>
<title>beforeend Example</title>
</head>
<body>
<div id="target">Original content</div>
<script>
var element = document.getElementById('target');
element.insertAdjacentHTML("beforeend", "<span> - Appended content</span>");
</script>
</body>
</html>
Example 4: Using afterend
Inserts HTML after the target element (as a sibling):
<!DOCTYPE html>
<html>
<head>
<title>afterend Example</title>
</head>
<body>
<div id="target">Original content</div>
<script>
var element = document.getElementById('target');
element.insertAdjacentHTML("afterend", "<p>Inserted after the target element</p>");
</script>
</body>
</html>
Comparison with Other Methods
| Method | Position Control | Performance | Replaces Content |
|---|---|---|---|
innerHTML |
No | Slower | Yes |
insertAdjacentHTML() |
Yes | Faster | No |
appendChild() |
Limited | Fast | No |
Key Benefits
- More efficient than
innerHTMLas it doesn't reparse existing content - Precise positioning control with four position options
- Maintains event listeners on existing elements
- Can insert complex HTML structures in one operation
Conclusion
The insertAdjacentHTML() method provides precise control over HTML insertion with four position options. It's more efficient than innerHTML and ideal for dynamically adding content without affecting existing elements.
1K+ Views
