如何从 HTML 中提取所有标题 textContents 并从中创建一个 <ul> 列表？

Question

对于博客，我想创建一个侧边导航栏，它将拉出所有博客 post 标题（写在 <h2> 中）并将它们列在 <ul> 中。到目前为止，这是我所拥有的，但出于某种原因，它将所有标题 textContents 放入单个 <li>，而不是为每个标题创建单独的 <li>。谁能说出为什么？我不知道为什么...

js.fiddle

document.addEventListener('DOMContentLoaded', () => {
  var ul = document.getElementById("sideNav");
  var li = document.createElement("li");
  var h2 = document.getElementsByTagName("h2");
  for (var i = 0; i < h2.length; i++) {
    li.appendChild(document.createTextNode(h2[i].textContent));
    ul.appendChild(li);
  }
})

<h2>Header 1</h2>
<h2>Header 2</h2>
<h2>Header 3</h2>
<h2>Header 4</h2>
<ul id="sideNav"></ul>

Answer 1

您只创建了一个 li 元素，但每个标题都需要一个。移动线

var li = document.createElement("li");

在循环中它会起作用。

Answer 2

您只能创建一个 LI

既然用粗箭头，为什么不用selection和forEach

document.addEventListener('DOMContentLoaded', () => {
  const ul = document.getElementById("sideNav");
  [...document.querySelectorAll("h2")].forEach(h2 => {
    const li = document.createElement("li");
    li.appendChild(document.createTextNode(h2.textContent)); 
    ul.appendChild(li);
  })
})

<h2>Header 1</h2>
<h2>Header 2</h2>
<h2>Header 3</h2>
<h2>Header 4</h2>
<ul id="sideNav"></ul>

或地图：

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById("sideNav").innerHTML =  [...document.querySelectorAll("h2")]
    .map(h2 => `<li>${h2.textContent}</li>`).join("");
})

<h2>Header 1</h2>
<h2>Header 2</h2>
<h2>Header 3</h2>
<h2>Header 4</h2>
<ul id="sideNav"></ul>

如何从 HTML 中提取所有标题 textContents 并从中创建一个 <ul> 列表？

How to pull all headings textContents out of HTML and make a <ul> list out of them?

html

javascript

appendchild