Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Making Changes to the DOM Appending Nodes

Aryaman Dhingra
Aryaman Dhingra
3,536 Points
Posted by Aryaman Dhingra
Aryaman Dhingra
3,536 Points

element.appendChild(); returning error "appendChild() is not a function" ?

When I type in the appendChild() function, it doesn't work, and when I check the developer tools, it tells me that it's not a function.

HELP PLEASE

3 Answers

Steve Gallant
Steve Gallant
14,943 Points
Steve Gallant
Steve Gallant
14,943 Points

Hi Samuel, Looks like you have a typo in JS line:

ul.appenChild(li);

which should be:

ul.appendChild(li);       // Note the d added

hope it helps! Steve

Geocarlos Alves
Geocarlos Alves
13,969 Points
Geocarlos Alves
Geocarlos Alves
13,969 Points

Which element are you trying to append a child to? Have you made sure the element is created/exists?

You may a append a child like this:

let div = document.createElement("div");

let p = document.createElement("p");

div.appendChild(p);

document.body.appendChild(div);

This would create da div tag, then create a p tag, append the p tag to the div and append the div to the body of the document.

SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Hi Geocarlos Alves I'm getting the exact same error in the console. Yes the the element ul exist and was called with 

let ul = document.getElementsByTagName('ul')[0];

then 

let li = document.createElement('li');

but 

ul.appendChild(li);

is returning an error in the console, ul.appendChild is not a function.

Here's the code.

const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');

toggleList.addEventListener('click', () => {
  if (listDiv.style.display == 'none') {
    toggleList.textContent = 'Hide list';
    listDiv.style.display = 'block';
  } else {
  toggleList.textContent = 'Show list';
  listDiv.style.display = 'none';
  }
});

descriptionButton.addEventListener('click', () => {
  if (descriptionInput.value == "") {
    descriptionP.innerHTML = 'Things that are purple:';
  } else {
    descriptionP.innerHTML = descriptionInput.value + ':';
    descriptionInput.value = "";
  }
});

addItemButton.addEventListener('click', () => {
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  ul.appenChild(li);
  addItemInput.value = "";
});

and the HTML

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>

    <button type="button" name="button" id="toggleList">Hide list</button>
<div class="list">
      <p class="description">Things that are purple:</p>

      <input type="text" name="" value="" class="description">
      <button type="button" name="button" class="description">Change list description</button>
      <ul>
        <li>grapes</li>
        <li>amethyst</li>
        <li>lavender</li>
        <li>plums</li>
      </ul>
      <input type="text" name="" value="" class="addItemInput">
      <button type="button" name="button" class="addItemButton">Add items</button>
</div>
    <script src="js/append-new-items.js"></script>
  </body>
</html>

<!-- <!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>
    <button id="toggleList">Hide list</button>
  <div class="list">
    <p class="description">Things that are purple:</p>
    <input type="text" class="description" class="description">
    <button class="description">Change list description</button>
    <ul>
      <li>grapes</li>
      <li>amethyst</li>
      <li>lavender</li>
      <li>plums</li>
    </ul>
  </div>
    <script src="js/styling-elements.js"></script>
  </body>
</html> -->
Brendan O'Connor
Brendan O'Connor
4,091 Points
Brendan O'Connor
Brendan O'Connor
4,091 Points

SAMUEL LAWRENCE , did you ever get an answer on this by chance?? Know it's been a couple years, but if you or anyone else could give a hand...my specific line of code is projectList.appendChild(project); and it's giving that same error, Uncaught TypeError: projectList.appendChild is not a function.

In context of an AJAX request, the full code is:

//event handler / callback function
githubRequest.onreadystatechange = function () {
  if (githubRequest.readyState === 4) {
    var repositories = JSON.parse(githubRequest.responseText);
    console.log(repositories);
    //append repositories to project section of site/////////////////////
    const projectSection = document.getElementById("projects");
    const projectList = projectSection.getElementsByTagName("ul");
    //for loop to run through repositories
    for (let i = 0; i < repositories.length; i++) {
      const project = document.createElement("li");
      project.innerHTML = repositories[i].name;
      console.log(projectList);
      //PROBLEM SECTION, NOT WORKING BELOW HERE///////////
      projectList.appendChild(project);
    }
  }
};
Brendan O'Connor
Brendan O'Connor
4,091 Points

Second time this week, found my answer within minutes of posting! I swear i looked a bit before asking...but turns out since i was using getElementsByTagName it was returning an HTML collection instead of a node list, and appendChild only works on a node list (h/t to this guy's blog post that turned me onto this!).