

以下のように一番上の要素を一番下に移動させるようなボタンの処理を jQuery で書きたいのですが、どのような書き方をすればいいのでしょうか？  
教えて頂けると助かります。

[code]

    1　　　2　　　3
    2　　　3　　　4
    3   →  4　 →  5
    4　　　5　　　1
    5　　　1　　　2
    
[/code]

**HTMLコード：**

[code]

    <div class="contents contents--table">
            <div class="table_title">テーブル</div>
            <div class="table"></div>
            <div id = "div-a">1番目</div>
            <div id = "div-b">2番目</div>
            <div id = "div-c">3番目</div>
            <div id = "div-d">4番目</div>
        </div>
        <button class="tabledown">移動</button>
    
[/code]


CC BY-SA 4.0
2022-05-27T08:43:43.893
89086
2022-05-28T04:42:55.260
2022-05-28T02:34:59.423
3060
52822
question
html jquery
テーブルの要素の並び順を入れ替えるボタンを作成したい


**HTML要素を並び替えたい** だけなのか, **jQueryでの手法** を知りたいのか,
質問からは判断できなかったため「HTML要素を並び替え」について記します

[code]

    document.querySelector('.tabledown').onclick = function () {
      var el = document.querySelector('div.contents>div.table').nextElementSibling
      var p = el.parentElement
      p.removeChild(el)
      p.appendChild(el)
    }
[/code]

[code]

    <div class="contents contents--table">
            <div class="table_title">テーブル</div>
            <div class="table"></div>
            <div id = "div-a">1番目</div>
            <div id = "div-b">2番目</div>
            <div id = "div-c">3番目</div>
            <div id = "div-d">4番目</div>
        </div>
        <button class="tabledown">移動</button>
[/code]


CC BY-SA 4.0
2022-05-28T04:42:55.260
89099
2022-05-28T04:42:55.260
43025
89086
answer