将节点作为子节点插入到JavaScript中现有子节点之前?
Javascript提供了insertBefore()方法,可将一个节点作为子节点插入另一个子节点之前。如果有2个列表,我们可以根据需要使用insertBefore()方法对元素之间的元素进行混洗。
语法
node.insertBefore(newnode, existingnode);
示例1
在下面的示例中,有两个列表,并且根据我们的要求,使用insertBefore() 方法对列表进行了混洗。要访问 列表中的多个元素,我们可以使用它们的索引。
现场演示
<html>
<body>
<ul id="List1"> <li>Tesla </li><li>Solarcity </li> </ul>
<ul id="List2"> <li>Google </li> <li>Drupal </li> </ul>
<script>
var node = document.getElementById("List2").firstChild;
var list = document.getElementById("List1");
list.insertBefore(node, list.childNodes[1]);
</script>
</body>
</html>输出结果
Tesla Google Solarcity Drupal
示例2
现场演示
<html>
<body>
<ul id="List1"> <li>Tesla </li> <li>Solarcity </li> </ul>
<ul id="List2"> <li>Google </li> <li>Drupal </li> </ul>
<script>
var node = document.getElementById("List2").firstChild;
var list = document.getElementById("List1");
list.insertBefore(node, list.childNodes[0]);
</script>
</body>
</html>输出结果
Google Tesla Solarcity Drupal
热门推荐
10 儿子立冬祝福语简短独特
11 对当兵的祝福语简短
12 侄儿高考试祝福语简短
13 伴郎红包祝福语朋友简短
14 媳妇生日简短祝福语朋友
15 公司年会祝福语简短最好
16 元旦感恩祝福语简短大全
17 红包祝福语简短10字
18 周六早晨祝福语简短