Aby na blogu chcę utworzyć boczny pasek nawigacyjny, który wyciągnie wszystkie blog tytuły post (napisane w <h2>'s) i wymień je wewnątrz <ul>. Oto, co mam do tej pory, ale z jakiegoś powodu umieszcza wszystkie nagłówki textContents w pojedynczy {x2}}, zamiast tworzyć oddzielne <li> nagłówek. Czy ktoś może powiedzieć dlaczego? Nie mogę tego zrozumieć z jakiegoś powodu ...

J.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>
1
ProudRambo 22 lipiec 2020, 15:55

2 odpowiedzi

Najlepsza odpowiedź

Tworzysz tylko jeden element li, ale potrzebujesz jednego na każdy nagłówek. Przesuń linię

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

Wewnątrz pętli i będzie działać.

1
RoToRa 22 lipiec 2020, 13:00

Ty kiedykolwiek tworzyłeś tylko jeden

Ponieważ używasz strzałek tłuszczu, dlaczego nie używać wyboru i 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>

Lub mapa:

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>
0
mplungjan 22 lipiec 2020, 13:32