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 ...
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