I want to move div1 and div2 to the end of list
with only vanilla 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 on a parent, and the order property on the desired child elements
.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>Using JavaScript - use the Element.append() method like:
// 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>You can do the following and the old div will be removed automatically
var element = document.getElementById('child1');
var parent = element.parentNode;
parent.insertAfter(element, parent.lastChild);