0

Estoy intentando poner el circulo azul en el medio de los otros dos colores, pero me lo ubica en la última posición, intenté hacer el insertBefore a la etiqueta amarilla pero el circulo azúl no aparece

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>

1 respuesta 1

2

Según la documentación de w3schools, El método insertBefore() inserta un nodo hijo antes de un hijo existente.

Si dejas el segundo parámetro de insertBefore() en null te lleva el nodo a la posición final.

En su lugar debes obtener el elemento anterior a la posición que necesitas y luego hacer el movimiento. En tu caso, debes obtener el último elemento hijo del contenedor colors.

//Obtener el elemento a mover
var blue = document.querySelector(".blue");
//Obtener el último elemento hijo del contenedor colors
var last = document.querySelector(".colors").lastElementChild;
//Realizar el movimiento antes del último elemento hijo
document.querySelector(".colors").insertBefore(blue, last);
.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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.