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:
xxxxxxxxxx1
function insertAfter(newElement, placeholder) {2
var parent = placeholder.parentNode;3
if (parent == null) { // null or undefined4
throw new Error('Placeholder element does not have parent node.');5
}6
var sibling = placeholder.nextSibling;7
if (sibling) {8
parent.insertBefore(newElement, sibling);9
} else {10
parent.appendChild(newElement);11
}12
}
xxxxxxxxxx1
2
<html>3
<body>4
<div>5
<p id="element-1">1st element...</p>6
<p id="element-2">2nd element...</p>7
<p id="element-3">3rd element...</p>8
<p id="element-4">4th element...</p>9
</div>10
<script>11
12
function insertAfter(newElement, placeholder) {13
var parent = placeholder.parentNode;14
if (parent == null) {15
throw new Error('Placeholder element does not have parent node.');16
}17
var sibling = placeholder.nextSibling;18
if (sibling) {19
parent.insertBefore(newElement, sibling);20
} else {21
parent.appendChild(newElement);22
}23
}24
25
26
// Usage example:27
28
var element3 = document.getElementById('element-3');29
30
var newElement = document.createElement('p');31
newElement.innerText = 'This is new element placed after 3rd...';32
33
insertAfter(newElement, element3);34
35
</script>36
</body>37
</html>