Question

如何使用javascript合并这两个<ol>代码？

这是我的代码：

<ol id="myList1">
    <li>Apple</li>
    <li>Pear</li>
    <li>Peach</li>
</ol>
<ol id="myList2">
    <li>Orange</li>
</ol>

输出：

<ol id="myList1">
   <li>Apple</li>
   <li>Pear</li>
   <li>Peach</li>
   <li>Orange</li>
</ol>

提前致谢。

Answer 1

Vanilla JS变体：

var list1    = document.getElementById('myList1'),
    list2    = document.getElementById('myList2'),
    children = list2.childNodes // select all children nodes from one element
    i, item;

// Add each children to list1
for (i = 0; item = children[i]; i++) {
    list1.appendChild(item);
}

// Remove list2 DOMElement
list2.parentNode.removeChild(list2);

Answer 2

(function(){
  var otherLis = $("#myList2").find("li").detach(); // this will detach li's from second OL
  $("#myList1").append(otherLis); // this will appeend them to first OL
}())

DEMO

Answer 3

在纯javascript中试试这个：

var a = document.getElementById('myList1');
var b = document.getElementById('myList2');
a.innerHTML = a.innerHTML + b.innerHTML;
b.remove();

首先获取两个列表的列表元素然后连接，然后添加到新列表中;

Answer 4

虽然不那么优雅，但在纯JS中有一个简单的解决方案：

document.getElementById("myList1").innerHTML += document.getElementById("myList2").innerHTML;

document.getElementById("myList2").remove();

只需将myList2的内容添加到myList1并删除myList2：不要太多解释。

Demo

Answer 5

试试这个：

document.querySelector('#myList1').appendChild(document.querySelector("#myList2>li"));

Fiddle

如何使用javascript合并<ol>标签？</ol>

5 个答案: