我有一个包含 26 个项目的列表,每个字母对应一个项目
<ul>
<li id="a">A</li>
...
<li id="m">M</li>
<li id="n">N</li>
...
<li id="z">Z</li>
</ul>
我如何使用 JavaScript 在“M”之后终止列表(即 </ul>
,添加一个 <h2>
元素并开始另一个列表,以“N”开头?
所以:
<ul>
...
<li id="m">M</li>
</ul>
<h2>Part 2</h2>
<ul>
<li id="n">N</li>
...
</ul>
我可以插入 h2
元素精细 .createElement
和 .insertBefore
,但我无法获得它两侧的结束和开始列表标签。我试过了 innerHTML
, outerHTML
, insertBefore
...
最佳答案
array#slice
方法不适用于 DOM 元素。我们将不得不遍历所有元素,并创建一个新数组。
首先,我们必须从 DOM 中删除原始列表。我们可以使用 removeChild
函数
var originalList = document.getElementById("existingList");
document.body.removeChild(orginalList);
# Or wherever your list was nested under
# find all your list elements. This is assuming you only have 26 list elements
var li = document.getElementsByTagName("li");
var firstLetters, secondLetters = [], [];
# Create array for first half of list elements
for (var i = 0; i < li.length/2; i++) {
firstLetters.push(li[i]);
}
# Create array for second half of list elements
for (var i = li.length/2; i < li.length; i++) {
secondLetters.push(li[i]);
}
var list1 = document.createElement("ul");
var list2 = document.createElement("ul");
document.body.appendChild(list1);
document.body.appendChild(list2);
for (var i = 0; i < firstLetters.length; i++) {
list1.appendChild(firstLetters(i));
}
for (var i = 0; i < secondLetters.length; i++) {
list2.appendChild(secondLetters(i));
}
关于JavaScript:将 HTML 列表分成两半,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31990615/