EN
JavaScript - insert element after element
8
points
In this article, we would like to show you how to insert an element after some element inside the DOM tree using JavaScript.
Quick solution:
function insertAfter(newElement, placeholder) {
var parent = placeholder.parentNode;
if (parent == null) { // null or undefined
throw new Error('Placeholder element does not have parent node.');
}
var sibling = placeholder.nextSibling;
if (sibling) {
parent.insertBefore(newElement, sibling);
} else {
parent.appendChild(newElement);
}
}
Practical example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div>
<p id="element-1">1st element...</p>
<p id="element-2">2nd element...</p>
<p id="element-3">3rd element...</p>
<p id="element-4">4th element...</p>
</div>
<script>
function insertAfter(newElement, placeholder) {
var parent = placeholder.parentNode;
if (parent == null) {
throw new Error('Placeholder element does not have parent node.');
}
var sibling = placeholder.nextSibling;
if (sibling) {
parent.insertBefore(newElement, sibling);
} else {
parent.appendChild(newElement);
}
}
// Usage example:
var element3 = document.getElementById('element-3');
var newElement = document.createElement('p');
newElement.innerText = 'This is new element placed after 3rd...';
insertAfter(newElement, element3);
</script>
</body>
</html>