使用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>