/*
пример навигации:
<article class="article wrap">
<section class="article-navigation">
<h3>Навигация по статье</h3>
<ul>
<li><a href="">AAA</a></li>
<li><a href="">Получение</a></li>
</ul>
</section>
</article>
*/
let h2s = d.getElementsByTagName("h2");
let article = document.querySelector("main > article");
/*====================== строю DOM навигации =======================*/
function buildNavigation() {
let articleNavigation = d.createElement("section").className = "article-navigation",
articleNavigation__h3 = d.createElement("h3").textContent = "Навигация по статье",
articleNavigation__ul = d.createElement("ul"),
articleNavigation__li = d.createElement("li"),
articleNavigation__navLinks = d.createElement("a");
articleNavigation.prepend(articleNavigation__h3);
//^^^ problem is here. append and appendChild methods don't work too
articleNavigation.append(articleNavigation__ul);
for (let i = 0; i < h2s.length; i++) {
articleNavigation__navLinks.setAttribute("href", i);
articleNavigation__navLinks.textContent = h2s[i].textContent
articleNavigation__li.append(articleNavigation__navLinks);
articleNavigation__ul.append(articleNavigation__li);
}
article.prepend(articleNavigation)
}
-
когда в процессе генерации то вставляете внутрь сгенерированного элемента методом innerHTML, после чего вставляете внутрь страницы сгенерированный элемент с текстом методом append– Monkey Mutant5 июн 2020 в 9:58
2 ответа
Результатом присваивания в такой форме будет являться не тип Node
, а String
.
Операторы присваивания вычисляют значения справа налево и вычисленное значение передают в переменную. Если ваш код разбить на два присваивания, то получится следующее
1. Вычислить первое присваивание
d.createElement("section").className = "article-navigation" // -> "article-navigation"
2. Вычислить второе присваивание
let articleNavigation = "article-navigation" // -> "article-navigation"
Таким образом у вас в articleNavigation
хранится строка, у которой естественно нет искомого метода.
Сделайте себе (или разработчикам-коллегам) одолжение, и разбейте код на две логически законченные операции. Потом, возвращаясь к своему коду через неделю-другую, вам будет все понятно.
Кстати, со следующим присваиванием такая же история.
Добавление класса для созданного элемента необходимо перенести ниже отдельной строкой. Иначе в левую часть записывается результат присвоения класса элементу, а не сам элемент.
let articleNavigation = d.createElement("section");
articleNavigation.className = "article-navigation";