Skąd bierze się ten problem "The node before which the new node is to be inserted is not a child of this node."?

Question

var  a = document.getElementById("a");
var  b = document.getElementById("b");
var  a2 = document.getElementById("a2");
var  b2 = document.getElementById("b2");
var isActive = false;
a.addEventListener("click", aZmienna);



function aZmienna() {
    var aText = document.getElementById("a").innerHTML;


var  a = document.getElementById("a");

if (aText == "A") {
    a.innerHTML = "A!";
    a.style.background = "green";
	isActive = true;
    
}
else{
    a.innerHTML = "A";
    a.style.backgroundColor = "red";
	isActive = false;
}
bramkaOR();


}

b.addEventListener("click", bZmienna )
function bZmienna() {
    var aText = document.getElementById("b").innerHTML;


    var  a = document.getElementById("b");

    if (aText == "B") {
        a.innerHTML = "B!";
			isActive = true;
        a.style.background = "green";
    }
    else{
        a.innerHTML = "B";
        a.style.backgroundColor = "red";
		isActive = false;
    }
    bramkaOR();
}

function bramkaOR(){
    if (a.innerHTML == "A!" || b.innerHTML == "B!"){
    
        document.getElementById("wynikOr").innerHTML = "Bramka jest aktywna";
    }
    else{
    
        document.getElementById("wynikOr").innerHTML = "Bramka nie jest aktywna";
    }
}
a2.addEventListener("click", a2Zmienna);

function a2Zmienna() {
    var a2Text = document.getElementById("a2").innerHTML;


var  a2 = document.getElementById("a2");

if (a2Text == "A") {
    a2.innerHTML = "A!";
		isActive = true;
    a2.style.background = "blue";
    
}
else{
    a2.innerHTML = "A";
    a2.style.backgroundColor = "green";
	isActive = false;
}
bramkaAnd();


}

b2.addEventListener("click", b2Zmienna )
function b2Zmienna() {
    var b2Text = document.getElementById("b2").innerHTML;


    var  b2 = document.getElementById("b2");

    if (b2Text == "B") {
        b2.innerHTML = "B!";
			isActive = true;
        b2.style.background = "blue";
    }
    else{
        b2.innerHTML = "B";
        b2.style.backgroundColor = "green";
		isActive = false;
    }
    bramkaAnd();
}

function bramkaAnd(){
    if (a2.innerHTML == "A!" && b2.innerHTML == "B!"){
    
        document.getElementById("wynikAnd").innerHTML = "Bramka jest aktywna";
    }
    else{
    
        document.getElementById("wynikAnd").innerHTML = "Bramka nie jest aktywna";
    }
}


var ball = document.createElement('div');
function createBall() {
    ball.style.width = 10+'px';
    ball.style.height = 10+'px';
    ball.style.backgroundColor = 'black';
    ball.style.left = 300+'px';
    ball.style.top = 10+'px';
    ball.style.position = 'absolute';
    document.body.insertBefore(ball,a);
}
createBall();
function move(shouldMove) {
    if(shouldMove) {
        ball.style.top = ball.offsetTop + 10 + 'px';
    }
}
bramkaOR();
move(isActive);
	

 

Answer 1

Na oko:

document.body.insertBefore(ball,a);

To mówi "dodaj ball jako dziecko do body, ale przed dzieckiem a". Ale 'a' nie jest bezpośrednio pod 'body'.