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