I am trying to put the blue circle in the middle of the other two colors, but it places it in the last position, I tried to do the insertBefore to the yellow label but the blue circle does not appear
var blue = document.querySelector(".blue");
document.querySelector(".colors").insertBefore(blue, null);
.colors{
display: flex;
}
.colors > span{
height: 50px;
width: 50px;
margin: 5px;
border-radius: 50%;
display: blocK;
}
.yellow{
background-color: #ffff00;
}
.blue{
background-color: #0000ff;
}
.red{
background-color: #ff0000;
}
<div class="colors">
<span class="blue"></span>
<span class="yellow"></span>
<span class="red"></span>
</div>
According to the w3schools documentation , The method
insertBefore()
inserts a child node before an existing child .If you leave the second parameter of
insertBefore()
ennull
it will take the node to the final position.Instead you should get the previous item to the position you need and then make the move. In your case, you should get the last child element of the container
colors
.