Failed to execute 'insertBefore' on 'Node'

Question

I'm trying to create a simple html page where new div will be added after previous (in dedicated "workspace"). The goal is achieved and all new <divs> are created properly

<body>

...

<div id="workspace" >

<script type="text/javascript">
var my_div = document.getElementById("workspace");
var newDiv = null;
function addElement()    {

newDiv = document.createElement("div");
newDiv.innerHTML = "<h7>Hi there and greetings!</h7>";
newDiv.style.width = "200px";
newDiv.style.height = "50px";
newDiv.style.background = "red";
my_div.appendChild(newDiv);
my_div.insertBefore(newDiv, workspace);

}
</script>

<a href="#" onclick="addElement()">ADD new  greeting</a>
</div>
...
</body>

However in my console I get an error:

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

I'm completely new in JS but I can't find any simple explanation. What is wrong with such code? Where does this error come from? No more JS is used in whole document...

What is `my_div.insertBefore(newDiv, workspace);` supposed to achieve? Where is the variable `workspace` defined? Remove that line and your script will work without an error. — Bergi, Jul 05 '22 at 22:31

score 0 · Answer 1 · answered Jul 05 '22 at 22:42

0

This is because workspace is not defined. You can add a new variable to store the latest div that you saved. Then check if it's not null (it's null when you click on the link for the first time. Then you can use insertBefore with the last div as the second argument

<div id="workspace">
    <script type="text/javascript">
        var my_div = document.getElementById("workspace");
        var newDiv = null;
        var lastDiv = null
        function addElement() {

            newDiv = document.createElement("div");
            newDiv.innerHTML = "<h7>Hi there and greetings!</h7>";
            newDiv.style.width = "200px";
            newDiv.style.height = "50px";
            newDiv.style.background = "red";
            my_div.appendChild(newDiv);
            if (lastDiv) {
                my_div.insertBefore(newDiv, lastDiv);
            }
            lastDiv = newDiv

        }
    </script>


    <a href="#" onclick="addElement()">ADD new greeting</a>
</div>

answered Jul 05 '22 at 22:42

Hossein hossein

147
4

The problem is rather that [`workplace` is actually defined](https://stackoverflow.com/q/3434278/1048572), but it's not a child node of `my_div`. – Bergi Jul 05 '22 at 23:48
Did you tried the code? It worked for me. – Hossein hossein Jul 06 '22 at 08:43
Sure the code in your answer works, I only disagree with the sentence "*This is because `workspace` is not defined.*" – Bergi Jul 06 '22 at 11:20
Cause it wasn't in your code. You can send the part that you declare `workspace` to see maybe that's the problem – Hossein hossein Jul 06 '22 at 13:08
It's not my code. The OP didn't declare a `workspace` variable, yes, but it's still defined, see the link I posted for an explanation – Bergi Jul 06 '22 at 13:45

Failed to execute 'insertBefore' on 'Node'

1 Answers1