TypeError appendChild Javascript

Question

I'm trying to insert a few links before the end tag of my NAV element, so after the rest of the links within that element. However, I keep running in to the error message "Uncaught TypeError: Cannot read property 'appendChild' of undefined" and I cannot figure out where/what the TypeError is. What am I missing? /: PS! I understand that "let" (or "const") is a replacement of var, in some instances, but I don't know if it's something to use here or not.

NOTE: I ended up here: enter link description here and then JavaScript closure inside loops – simple practical example but without any avail. There I tried 'stemon''s examples but I couldn't figure out where I should add my appendChild without still getting the same error. i.e: None of those threads gives me an understanding of what I am actually missing here.. They may give me an answer, but not one I can grasp obviously.

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]

`node` is the [`HTMLCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection), not an `Element`. You need to get *one* element to use `parentNode` or `appendChild`. — VisioN, Jun 29 '18 at 11:50

score 1 · Answer 1 · answered Jun 29 '18 at 11:54

As nav has no parent element it was showing error and also you need to get node[0] for access parent element.

Here's working solution -

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>

Guerric P · Accepted Answer · 2018-06-29T12:07:28.690

document.getElementsByTagName("nav")returns an Array of all matching elements, then you have to pick the first one.

You are instantiating only one element because your line ele = document.createElement("a");is outside the loop.

You don't need parentNode at all.

Here is the forked Fiddle

The let keyword allows to create a variable that is scoped to the wrapping block. Otherwise the variables are scoped to the parent function, but it has nothing to do with the problems you were experiencing.

Closures are something you may learn later, it is useful when doing asynchronous operations into loops, and many other things, but does not need to be used in your case.

Thank you for the detailed explanation! This did the trick and I now understand a bit more about this in practice. — Streching my competence, Jun 29 '18 at 14:14

score 1 · Answer 3 · answered Jun 29 '18 at 12:53

You should use HTMLCollection method item() to get the node (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection/item). Moreover, you should not add elements to a parent node but to the node itself.

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 Answers3