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

望采纳