Quiero mover div1 y div2 al final de la lista
con solo vainilla javascript
<div class="container"> <div id="chlid-1"></div> <div id="chlid-2"></div> <div id="chlid-3"></div> <div id="chlid-4"></div> <div id="chlid-5"></div> </div>Use CSS flex en un padre y la propiedad order en los elementos secundarios deseados
.container { display: flex; flex-direction: column; } #child-1, #child-2 { order: 1; } <div class="container"> <div id="child-1">1</div> <div id="child-2">2</div> <div id="child-3">3</div> <div id="child-4">4</div> <div id="child-5">5</div> </div>Usando JavaScript - use el métodoElement.append() como:
// DOM utils: const ELS = (sel, par) => (par || document).querySelectorAll(sel); const EL = (sel, par) => (par || document).querySelector(sel); // Task: EL(".container").append(...ELS("#child-1, #child-2")); <div class="container"> <div id="child-1">1</div> <div id="child-2">2</div> <div id="child-3">3</div> <div id="child-4">4</div> <div id="child-5">5</div> </div>Puede hacer lo siguiente y el antiguo div se eliminará automáticamente
var element = document.getElementById('child1'); var parent = element.parentNode; parent.insertAfter(element, parent.lastChild);