用javascript更改html中div的顺序最快捷、最简单的方法是什么

Question

我想把div1和div2移到列表的末尾

只有香草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>

Answer 1

在父元素上使用CSS flex，在所需子元素上使用order属性

.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>

使用JavaScript-使用Element.append((方法，如：

// 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>

Answer 2

您可以执行以下操作，旧的div将自动删除

var element = document.getElementById('child1');
var parent = element.parentNode;
parent.insertAfter(element, parent.lastChild);