代码之家 › 专栏 › 技术社区 › Streching my competence

类型错误AppendChild javascript

appendchild javascript

0

Streching my competence · 技术社区 · 6 年前

我试图在nav元素的结束标记之前插入一些链接,所以在该元素中的其余链接之后插入。但是,我一直在运行错误消息“uncaught typeerror:cannot read property'appendchild'of undefined”,我无法确定typeerror在哪里/是什么。我错过了什么?/: ps!我理解“let”(或“const”)是var的替换,在某些情况下,但我不知道它是否是要在此处使用的东西。

注意: 我在这里结束: 在此处输入链接说明然后 javascript闭包内循环简单实用示例但没有任何用处。在那里,我尝试了“stemon”的例子,但是我不知道应该在哪里添加appendchild,而仍然得到相同的错误。也就是说: 这些线程中没有一个能让我了解我在这里实际缺少的东西。 。他们可能会给我一个答案,但我显然无法理解。

var node=document.getElementsByTagname(“nav”); ele=document.createElement(“a”); VaR上升=0; 对于(steppup=0;steppup<8;steppup++){ ele.innerhtml='测试'; node.parentnode.appendChild(ele,node.nextSibling); 控制台日志(升级); }<H3>菜单</H3> <a href=“”>链接1</a><br> <a href=“”>链接2</a><br> <a href=“”>链接3</a><br> <a href=“”>链接4</a><br> <a href=“”>链接5</a><br> <a href=“”>链接6</a> </nav>. [这里的a fiddle also]PS!我知道在某些情况下,“let”(或“const”)是var的替代品,但我不知道它是否可以在这里使用。注:我在这里结束了:在此处输入链接说明然后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]

3 回复 | 直到 6 年前

1

Guerric P 6 年前

document.getElementsByTagName("nav")

您只实例化一个元素,因为您的行 ele = document.createElement("a");

parentNode 完全。

Here is the forked Fiddle

let

闭包是您以后可能会学到的东西,它在对循环进行异步操作时非常有用,还有许多其他事情,但在您的案例中不需要使用闭包。

2

1

Vivek 6 年前

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>

3

1

Iurii Drozdov 6 年前

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);
}