JavaScript 要素の位置を移動させるにはどうすればいいのでしょうか？

赤色を水色の場所に、
水色を赤色の場所に入れ替えたいです
どうやればいいんでしょうか？

<script>

function change(){
document.body.insertBefore(document.getElementById("a"), document.getElementById("c"));
}
window.onload=function(){
div = document.createElement("div");
div.id="a";
div.style.width="100px";
div.style.height="100px";
div.style.cssFloat="left";
div.style.background="red";
document.body.appendChild(div);


div = document.createElement("div");
div.id="b";
div.style.width="100px";
div.style.height="100px";
div.style.cssFloat="left";
div.style.background="blue";
document.body.appendChild(div);


div = document.createElement("div");
div.id="c";
div.style.width="100px";
div.style.height="100px";
div.style.cssFloat="left";
div.style.background="aqua";
document.body.appendChild(div);


div = document.createElement("div");
div.id="d";
div.style.width="100px";
div.style.height="100px";
div.style.cssFloat="left";
div.style.background="yellow";
document.body.appendChild(div);
}
</script>

<input type="button" value="移動" onclick="change()">

m.ts10806

2022/11/20 00:34

「位置」「場所」などキーワードが出ているので何も調べようがないとは思えませんが、調べたこと試したことはないでしょうか現状だと調べてすぐ出そうな記事の紹介程度になるので質問作ってたり待ってる時間が勿体ないです

行動規範の内容に同意します

回答2件

ベストアンサー

JavaScriptではなくCSSでのアプローチなのですが…flexboxのorderを使えば簡単だと思います！

動作確認用サンプル：https://jsfiddle.net/jnqc796f/

html
1<div id="container" class="container"></div>
2<input type="button" value="移動" onclick="change()">

css
1.container {
2  display: flex;
3}

javascript
1const container = document.getElementById('container');
2
3function change() {
4  const divA = document.getElementById('a');
5  const divC = document.getElementById('c');
6  
7  divA.style.order = 3;
8  divC.style.order = 1;
9}
10
11window.onload = function() {
12  div = document.createElement("div");
13  div.id = "a";
14  div.style.width = "100px";
15  div.style.height = "100px";
16  div.style.background = "red";
17  div.style.order = 1;
18  container.appendChild(div);
19
20  div = document.createElement("div");
21  div.id = "b";
22  div.style.width = "100px";
23  div.style.height = "100px";
24  div.style.background = "blue";
25  div.style.order = 2;
26  container.appendChild(div);
27
28  div = document.createElement("div");
29  div.id = "c";
30  div.style.width = "100px";
31  div.style.height = "100px";
32  div.style.background = "aqua";
33  div.style.order = 3;
34  container.appendChild(div);
35
36  div = document.createElement("div");
37  div.id = "d";
38  div.style.width = "100px";
39  div.style.height = "100px";
40  div.style.background = "yellow";
41  div.style.order = 4;
42  container.appendChild(div);
43}

投稿2022/11/20 11:51

編集2022/11/20 11:51

Cocode

総合スコア2314

隣接していないノードの場合はもう一度移動する必要があると思います。

document.body.insertBefore(document.getElementById("a"), document.getElementById("c"));
document.body.insertBefore(document.getElementById("c"), document.getElementById("b"));

参考
https://htmldom.dev/swap-two-nodes/

投稿2022/11/20 05:17