Question

我正在尝试在NAV元素的结束标记之前插入一些链接，因此要在该元素内的其余链接之后插入。但是，我一直遇到错误消息“未捕获的TypeError：无法读取未定义的属性'appendChild'”，而且我无法弄清TypeError的位置/含义。我想念什么？ /： PS！我了解在某些情况下，“ let”（或“ const”）是var的替代，但我不知道这里是否要使用它。

注意：：我到这里了：enter link description here，然后是JavaScript closure inside loops – simple practical example，但无济于事。在那里，我尝试了“ 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>

[Here's a fiddle also]

Answer 1

由于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>

Answer 2

document.getElementsByTagName("nav")返回一个包含所有匹配元素的数组，然后您必须选择第一个。

由于行ele = document.createElement("a");在循环之外，因此您仅实例化了一个元素。

您根本不需要parentNode。

Here is the forked Fiddle

使用let关键字可以创建一个范围为包装块的变量。否则变量的作用域为父函数，但与您遇到的问题无关。

闭包是您稍后可以学习的知识，在将异步操作执行到循环中以及其他许多事情时很有用，但在您的情况下无需使用

。

Answer 3

您应该使用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);
}

TypeError appendChild Javascript

3 个答案: