Question

I’m attempting to insert a div before the “add div” button. I’m receiving an node not found error with this code:

document.getElementById("reg").insertBefore(newField, document.getElementById("op"));

But this code works, even though it’s not the result I want:

document.getElementById("reg").insertBefore(newField, document.getElementById("op").parentNode);

Here’s the source:

<form id="reg">
  <div class="section">
    <div class="sectionHeader">Welcome</div>
    <div id="op1">
      <div class="split25">
        <select></select>
      </div>
      <div class="split25">
        <select></select>
      </div>
      <div class="split50">
        <input>
      </div>
    </div>
    <div class="additional" id="op"><button></div>
  </div>
<form>

Why can it access its parent node but not itself?

Answer 1

When you insertBefore, the second argument has to be a CHILD of the base object

parentNode.insertBefore(newNode, existingNode);

If existingNode is not a child of parentNode this will fail. That’s what is happening in your code.