¿Cómo puedo reordenar elementos con JavaScript?

4 minutos de lectura

avatar de usuario
Alejandro

¿Cómo haría para reordenar divs sin alterar el código fuente HTML?

ejemplo, quiero que aparezcan los divs en el orden #div2, #div1, #div3, pero en el HTML son:

<div id="#div1"></div>  
<div id="#div2"></div>  
<div id="#div3"></div>

¡Gracias!

  • Gracias por sus respuestas. Mi solución actual hace lo que muchos de ustedes recomendaron, juega con el HTML. Me preguntaba si había una manera confiable de hacer la clasificación sin tocar el HTML, y supongo que ustedes respondieron: no. ¡Aprecio tu ayuda!

    – Alejandro

    17 de febrero de 2009 a las 22:00

avatar de usuario
Magnar

No existe una forma general de reordenar elementos con css.

Puede invertir su orden horizontalmente flotándolos todos hacia la derecha. O puede posicionarlos absolutamente en relación con el cuerpo o algún otro elemento que los contenga, pero eso viene con severas limitaciones con respecto al tamaño de los elementos y el posicionamiento en relación con otros elementos en la página.

Respuesta corta: solo puede lograr esto en un conjunto muy limitado de circunstancias. La reordenación de elementos se realiza mejor en el marcado.

Si no tiene control sobre el html, puede usar javascript. Aquí usando jQuery:

$("#div2").insertAfter("#div3");
$("#div1").prependTo("#div2");

Ciertamente no lo recomiendo a menos que tengas las manos atadas. Será más difícil de mantener, y para sus usuarios finales hará que su página “se mueva” mientras la configura.

  • Su redacción es desafortunada, porque está comenzando con una declaración falsa. Hay una forma general de reordenar elementos con CSS: ordenar. Básicamente, no importa en qué orden estén en DOM, se mostrarán en el orden especificado por el elemento order Prop CSS, cuando se especifica (y es válido) este prop.

    – tao

    13 de diciembre de 2021 a las 21:18


  • Nota: order solo funciona dentro de elementos con un display valor de flex o grid (o su inline-* variantes).

    – tao

    13 de diciembre de 2021 a las 21:28


avatar de usuario
Krzysztof Atłasik

Desde ahora caja flexible es ampliamente compatible, también puede usarlo para reordenar divs usando solo css:

<div id="container">
    <div id="div1">1</div>  
    <div id="div2">2</div>  
    <div id="div3">3</div>
</div>

Y CSS:

#container{
  display: flex;
  flex-direction: column;
}

#div2{
  order:2
}

#div3{
  order:1
}

Mostraría:

1
3
2

Puedes probarlo en este violín.

  • ¡Interesante! El uso de Javascript para cambiar el atributo de orden de CSS no vuelve a dibujar los elementos (p. ej., element.style.order = 20;). Excelente. ¡Entonces es posible reordenar elementos sin volver a dibujar!

    – Ahí

    19 de marzo de 2020 a las 16:53

  • Desafortunadamente, MDN dice que no deberías hacer esto si cambiar el orden es más que una simple distracción visual, es decir. en realidad tiene algún significado, como en los resultados de búsqueda, por ejemplo, porque los lectores de pantalla no lo detectan: Dado que el orden solo está destinado a afectar el orden visual de los elementos y no su orden lógico o de tabulación. El orden no debe utilizarse en medios no visuales como el habla. desarrollador.mozilla.org/en-US/docs/Web/CSS/order

    – matemáticas2001

    14/03/2021 a las 22:50


avatar de usuario
jose stodola

Usaría Javascript para atravesar los nodos en consecuencia. Si desea utilizar una biblioteca como jQuery, puede utilizar las sugerencias anteriores. Si prefiere no tener la hinchazón, use la siguiente solución simple y minimalista…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
      function swapSibling(node1, node2) {
        node1.parentNode.replaceChild(node1, node2);
        node1.parentNode.insertBefore(node2, node1); 
      }

      window.onload = function() {
        swapSibling(document.getElementById('div1'), document.getElementById('div2'));
      }
    </script>
  </head>
  <body>
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
  </body>
</html>

Saludos…

EDITAR: Se cambió el nombre de la función de swapNode a swapSibling, ya que estoy bastante seguro de que esto solo funcionará con nodos que tengan el mismo padre.

  • @ node1.parentNode.insertBefore(node2, node1); > ¿se seguirá haciendo referencia a node1.parentNode ya que node1 es reemplazado por node2?

    -Joseph Merdrignac

    9 sep 2016 a las 10:46


En jQuery, puede hacer lo siguiente:

$("#div1").insertAfter("#div2");

Eso moverá el elemento con id ‘div1’ al elemento posterior con id ‘div2’. Esto supone que elimina el ‘#’ de sus atributos de identificación.

Podrías hacer, en Javascript:

function reOrder() {
  divOne = document.getElementById('#div1');
  divTwo = document.getElementById('#div2');
  divThree = document.getElementById('#div3');
  container = divOne.parentNode;
  container.appendChild(divTwo);
  container.appendChild(divOne);
  container.appendChild(divThree);
}

Editar: error tipográfico fijo en las identificaciones.

avatar de usuario
tom ritter

Ya que etiquetó jQuery, podría usar javascript para retirar los elementos y luego volver a insertarlos aunque eso puede no ser demasiado flexible.

Tener un poco más de contexto te daría mejores respuestas, creo.

¿Ha sido útil esta solución?