TypeError appendChild Javascript

Question

我试图在我的 NAV 元素的结束标记之前插入一些链接，所以在该元素中的其余链接之后。但是，我将运行保留在错误消息 "Uncaught TypeError: Cannot read property 'appendChild' of undefined" 中，我无法弄清楚 where/what TypeError 是什么。我错过了什么？ /: PS! 我知道 "let"（或 "const"）在某些情况下是 var 的替代品，但我不知道在这里用还是不用。

注意： 我最终来到这里：enter link description here and then JavaScript closure inside loops – simple practical example 但没有任何效果。在那里我尝试了 'stemon' 的示例，但我无法弄清楚我应该在哪里添加我的 appendChild 而不会仍然出现相同的错误。即：None 这些线程让我了解我在这里实际缺少的东西。。他们可能会给我一个答案，但不是一个我能明显把握的答案。

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")returns一个所有匹配元素的Array，那么你要挑第一个。

您只实例化了一个元素，因为您的行 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

TypeError appendChild Javascript

javascript

appendchild