JavaScript：将HTML列表分成两半

Question

我有一个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>

我可以使用 .createElement 和 .insertBefore 成功地插入 h2 元素，但我无法在其两侧获取关闭和开放列表标记。我已尝试使用 innerHTML、outerHTML、insertBefore 等方法...

- neil

---

你需要使用JQuery来提取 <ul> 的内容并用新的<ul>重新包装这两个组件。添加元素应该很容易。 - Shadowen

我不想使用jQuery，因为我询问的是如何使用JavaScript :-P - neil

Answer 1

< p > array#slice 方法不能用于 DOM 元素。我们需要遍历所有元素，并创建一个新的数组。< /p > < p > 首先，我们必须从 DOM 中删除原始列表。我们可以使用 removeChild 函数来完成这个操作。< /p >

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));
}

- Richard Hamilton

---

谢谢您遵循示例 - 但是我得到了“li.slice不是函数”的错误？ - neil

Answer 2

你可以获取 ul，克隆它，插入克隆体，并将 ul 的子节点添加到克隆体的第13个子元素之后：

var ul = document.querySelector('ul'),
    newUl = ul.cloneNode(false),
    last = ul.children[12];
ul.parentNode.insertBefore(newUl, ul.nextSibling);
ul.parentNode.insertBefore(document.createElement('h2'), newUl)
  .appendChild(document.createTextNode('Part 2'));
while(last.nextSibling) newUl.appendChild(last.nextSibling);

var ul = document.querySelector('ul'),
    newUl = ul.cloneNode(false),
    last = ul.children[12];
ul.parentNode.insertBefore(newUl, ul.nextSibling);
ul.parentNode.insertBefore(document.createElement('h2'), newUl).appendChild(document.createTextNode('Part 2'));
while(last.nextSibling) newUl.appendChild(last.nextSibling);

<ul>
  <li id="a">A</li>
  <li id="b">B</li>
  <li id="c">C</li>
  <li id="d">D</li>
  <li id="e">E</li>
  <li id="f">F</li>
  <li id="g">G</li>
  <li id="h">H</li>
  <li id="i">I</li>
  <li id="j">J</li>
  <li id="k">K</li>
  <li id="l">L</li>
  <li id="m">M</li>
  <li id="n">N</li>
  <li id="o">O</li>
  <li id="p">P</li>
  <li id="q">Q</li>
  <li id="r">R</li>
  <li id="s">S</li>
  <li id="t">T</li>
  <li id="u">U</li>
  <li id="v">V</li>
  <li id="w">W</li>
  <li id="x">X</li>
  <li id="y">Y</li>
  <li id="z">Z</li>
</ul>

- Oriol