создаю автозаполняемое меню навигации по статье. оно работает только с элементами h2 и присваивает им id от 0 до конца. затем заполняет меню, используя textcontent
заголовка и создавая список внутри которого содержится соответствующий id'у href (по задумке). но проблема в том, что только последний элемент добавляется в меню.
const d=document;
let h2s = d.getElementsByTagName("h2");
let article = document.getElementsByTagName("article")[0];
/*====================== строю DOM навигации =======================*/
function buildNavigation() {
let articleNavigation = d.createElement("section"),
articleNavigation__h3 = d.createElement("h3"),
articleNavigation__ul = d.createElement("ul"),
articleNavigation__li = d.createElement("li"),
articleNavigation__navLinks = d.createElement("a");
//класс, заголовок
articleNavigation.className = "article-navigation";
articleNavigation__h3.textContent = "Навигация по статье";
//вставляю
articleNavigation.prepend(articleNavigation__h3);
articleNavigation.append(articleNavigation__ul);
for (let i = 0; i < h2s.length; i++) {
articleNavigation__ul.append(articleNavigation__li);
articleNavigation__li.append(articleNavigation__navLinks);
articleNavigation__navLinks.setAttribute("href", "#" + i);
articleNavigation__navLinks.textContent = h2s[i].textContent;
}
//^^^ в цикле скорее всего что то не так. создаётся ссылка только на последний элемент h2
article.prepend(articleNavigation)
}
/**================================================================**/
function giveIdsToHeadings() {
//присваиваем каждому заголовку id по порядку: "0, 1, 2..."
for (let i = 0; i < h2s.length; i++) {
h2s[i].setAttribute("id", i);
};
};
if (h2s.length > 1) {
giveIdsToHeadings();
buildNavigation();
}
.article{
padding:0px 20px 20px 20px;
width:1110px;
margin:0 auto;
border:1px solid violet;
}
.article-navigation {
width:30%;
padding:10px;
margin:20px;
border-radius:2%;
border:1px dashed red;
}
.article-navigation > h3{
color:#4c566a;
text-align: center;
font-size:1.2em;
}
.article-navigation li {
margin-bottom:15px;
}
<article class="article">
<h2>первый</h2>
<h2>второй</h2>
<h2>третий</h2>
<h2>четвёртый</h2>
</article>