I’m trying to insert <hr> between first and second .field-container. Both share the same parent so, element1.parentNode.insertBefore(element2, ...) should work. It’s not working and I’m getting an error instead.
(function() {
let containers = document.querySelectorAll('.field-container');
let hr = document.createElement('hr');
containers[0].parentNode.insertBefore(containers[1], hr);
})();
<div>
<div class="field-container">
<input placeholder="Field 1" type="text">
<span></span>
</div>
<div class="field-container">
<input placeholder="Field 2" type="text">
<span></span>
</div>
</div>By appending hr first to the parent element then trying to insert it between both containers fixes the error but the insertion happens at the end, not between.
(function() {
let containers = document.querySelectorAll('.field-container');
let hr = document.createElement('hr');
containers[0].parentNode.appendChild(hr);
containers[0].parentNode.insertBefore(containers[1], hr);
})();
<div>
<div class="field-container">
<input placeholder="Field 1" type="text">
<span></span>
</div>
<div class="field-container">
<input placeholder="Field 2" type="text">
<span></span>
</div>
</div>>Solution :
insertBefore(newNode, referenceNode)
Since you need the hr before containers[1]
your newNode or node to be inserted is the hr and the referenceNode or node before which newNode is inserted is the containers[1]
(function() {
let containers = document.querySelectorAll('.field-container');
let hr = document.createElement('hr');
// containers[0].parentNode.appendChild(hr); this not needed
containers[0].parentNode.insertBefore(hr, containers[1]);
})();<div>
<div class="field-container">
<input placeholder="Field 1" type="text">
<span></span>
</div>
<div class="field-container">
<input placeholder="Field 2" type="text">
<span></span>
</div>
</div>