TypeError appendChild Javascript - PullRequest
Новая
       8

TypeError appendChild Javascript

0 голосов
/ 29 июня 2018

Я пытаюсь вставить несколько ссылок перед конечным тегом моего элемента NAV, а также после остальных ссылок в этом элементе. Тем не менее, я продолжаю работать с сообщением об ошибке «Uncaught TypeError: Невозможно прочитать свойство 'appendChild' неопределенного», и я не могу выяснить, где / что является TypeError. Что мне не хватает? /: PS! Я понимаю, что "let" (или "const") в некоторых случаях является заменой var, но я не знаю, использовать это здесь или нет.

ПРИМЕЧАНИЕ: Я попал сюда: введите здесь описание ссылки , а затем Закрытие JavaScript внутри циклов - простой практический пример , но безрезультатно. Там я попробовал примеры 'stemon', но я не мог понять, куда мне добавить свой appendChild, не получая при этом той же ошибки. Т.е.: Ни одна из этих тем не дает мне понимания того, чего я здесь на самом деле упускаю. . Они могут дать мне ответ, но не тот, который я могу понять, очевидно. 

var node = document.getElementsByTagName("NAV");
ele = document.createElement("a");
var stepup = 0;

for (stepup = 0; stepup < 8; stepup++) {
	ele.innerHTML = 'test';
	node.parentNode.appendChild(ele, node.nextSibling);
	console.log(stepup);
}
<nav style="overflow:scroll;">
			<h3>Menu</h3>
			<a href="#">Link 1</a><br>
			<a href="#">Link 2</a><br>
			<a href="#">Link 3</a><br>
			<a href="#">Link 4</a><br>
			<a href="#">Link 5</a><br>
			<a href="#">Link 6</a>
</nav>

[Вот и скрипка тоже]

Ответы [ 3 ]

0 голосов
/ 29 июня 2018

document.getElementsByTagName("nav") возвращает массив всех соответствующих элементов, затем вы должны выбрать первый.

Вы создаете экземпляр только одного элемента, потому что ваша строка ele = document.createElement("a"); находится вне цикла.

Вам вообще не нужно parentNode.

Вот раздвоенная скрипка

Ключевое слово let позволяет создать переменную, которая ограничена областью переноса. В противном случае переменные ограничиваются родительской функцией, но это не имеет никакого отношения к проблемам, с которыми вы столкнулись.

Замыкания - это то, что вы можете узнать позже, это полезно при выполнении асинхронных операций в циклах и многих других вещах, но не требует использования в вашем случае.

0 голосов
/ 29 июня 2018

Вы должны использовать метод HTMLCollection item (), чтобы получить узел (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection/item). Более того, вы должны добавлять элементы не в родительский узел, а в сам узел. 

const node = document.getElementsByTagName("nav").item(0);

for (let stepup = 0; stepup < 8; stepup++) {
    let el = document.createElement("a");
    el.innerHTML = 'test';
    el.href = "#";
    node.appendChild(el);
    node.insertBefore(document.createElement("br"), el);
}
0 голосов
/ 29 июня 2018

Поскольку nav не имеет родительского элемента, он отображал ошибку, а также вам необходимо получить node[0] для доступа к родительскому элементу.

Вот рабочее решение - 

var node = document.getElementsByTagName("nav");
ele = document.createElement("a");
var stepup = 0;

for (stepup = 0; stepup < 8; stepup++) {
  ele.innerHTML = 'test';
  node[0].parentNode.appendChild(ele, node.nextSibling);
  console.log(stepup);
}
<div>
  <nav style="overflow:scroll;">
    <h3>Menu</h3>
    <a href="#">Link 1</a><br>
    <a href="#">Link 2</a><br>
    <a href="#">Link 3</a><br>
    <a href="#">Link 4</a><br>
    <a href="#">Link 5</a><br>
    <a href="#">Link 6</a>
  </nav>
</div>
...