javascriptを使用してHTMLタグの配置を変更する

Question

スワップボタンやクリックするたびにボタンをクリックして、タグの配置が変更されるようにします。ダウンボタンがクリックされるたび例えば

、アップボタンがクリックされるたびに

<p id="1">h11</p> 
<p id="2">h22</p> 
<p id="3">h33</p> 

、それは

<p id="2">h22</p> 
<p id="1">h11</p> 
<p id="3">h33</p> 

になり、それがすることが可能である

<p id="1">h11</p> 
<p id="3">h33</p> 
<p id="2">h22</p> 

なりタグの配置を入れ替えますか？

ありがとうございました！

Answer 1

insertAfterの方法がないので少しばかげています。

function move(id, direction) { 
 
    let el = document.getElementById(id); 
 
    let next = el.nextElementSibling == null ? null : el.nextElementSibling.nextElementSibling; 
 
    let prev = el.previousElementSibling; 
 

 
    if (direction === 'down') { 
 
    el.parentElement.insertBefore(el, next); 
 
    } else { 
 
    if (prev) el.parentElement.insertBefore(el, prev); 
 
    } 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" /> 
 
<div> 
 
    <div id="1">h11</div> 
 
    <div id="2">h22</div> 
 
    <div id="3">h33</div> 
 
    <div id="4">h44</div> 
 
    <div id="5">h55</div> 
 
    <div id="6">h66</div> 
 
</div> 
 
<button onclick="move('1', 'down')">Down</button> 
 
<button onclick="move('1', 'up')">Up</button>

Answer 2

あなたは、あなたが唯一のクラス名を変更する必要があるでしょう要素

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

 
.first-item { 
 
    order: 2; 
 
} 
 
.second-item { 
 
    order: 3; 
 
} 
 
.third-item { 
 
    order: 1; 
 
}

<div class="flex-container"> 
 
    <div class="first-item">I'm first</div> 
 
    <div class="second-item">I'm second</div> 
 
    <div class="third-item">I'm third</div> 
 
</div>

の順序を変更するためのフレックスボックスを使用することができます。