使用js操作dom

Question

如何使下边这个有序列表变成另一个，也就是将4移入1的下边

<ul>
        <li id="1">1</li>
        <li id="2">2</li>
        <li id="3">3</li>
        <li id="4">4</li>
    </ul>

 <ul>
        <li id="1">1</li>
        <li id="4">4</li>
        <li id="2">2</li>
        <li id="3">3</li>
    </ul>

Answer 1

思路最简使用appendChild()方法，利用其将元素移除DOM树后再重新加入。

<ul>
    <li id="1">1</li>
    <li id="2">2</li>
    <li id="3">3</li>
    <li id="4">4</li>
</ul>
<button id="implement">执行</button>
<!--创建一个按钮以便演示效果-->
<script>
    var el = document.getElementById('4');
    //获取要操作的元素
        list = document.getElementsByTagName("li");
        //获取要操作的列表序列
        implement = document.getElementById('implement');
        //获取执行按钮
    implement.onclick = function () {
        list[0].appendChild(el);
        //list[0]的后边加入元素el;
    }
</script>

望采纳

Answer 2

insertBefore()

Answer 3

jq：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        
       $(document).ready(function(){
        $('ul').append($('ul li:eq(1)'));
        $('ul').append($('ul li:eq(1)'));
       })
    </script>

js:

        let node = document.getElementById("4"),
            list = document.querySelector("ul");
        list.insertBefore(node,list.childNodes[2]);