The error is saying : "list.appendChild is not a function"

Question

function addList(value) {
      const list = document.getElementsByClassName("list-div ")
      var div = document.createElement("div");
      div.classList.add("list-new");
       div.innerHTML = `<div class="h5-div" >
          <h5 class="list" >${value}</h5>
          </div>
          <div class="actions" >
          <span class="action-span" ><button 
                  class="action-btn">done</button></span>
          <span class="action-span" ><button 
                 class="action-btn">edit</button></span>
          <span class="action-span" ><button 
                   class="action-btn">delete</button></span>
          </div>`;

      list.appendChild(div);
}

`getElementsByClassName` would return an array. maybe list[0] will work — Krishna Prashatt, Apr 15 '19 at 12:54
The `list` is an HTML Collection instance and it doesn't have an `appendChild` method. You can't add to the DOM via that interface, to my knowledge; I'm not sure how it could make sense. You'll need to determine where in the DOM you want your new `
` to go, and then use DOM node APIs to add it (like `appendChild`). — Pointy, Apr 15 '19 at 12:58

score 0 · Answer 1 · answered Apr 15 '19 at 12:57

Preferibly when you are attaching elements to a list with a function, the best option is provide an id instead of a class. If you want to use the class, you have to use [0] since the "const list" is an array. You can't append a child to an array, you need to provide the exact element.

score 0 · Answer 2 · answered Apr 15 '19 at 12:57

0

Use list[0] since getElementsByClassName returns a HTMLCollection (array-like object):

list[0].appendChild(div);

answered Apr 15 '19 at 12:57

Jack Bashford

43,180
11
50
79

Thanks, I didn't know getElementsByClassName returns an array. – darz Quiredo Apr 15 '19 at 13:16

score 0 · Answer 3 · answered Apr 15 '19 at 12:57

getElementsByClassName returns a HTML Collection. You might need to use list[0] depending on what you wish to do.

list[0].appendChild(div);

Also, you can consider using document.getElementByID('uniqueId') if you wish to get one unique list in your dom. You need to create a list as:

<ul id="uniqueId">
</ul>

The error is saying : "list.appendChild is not a function"

3 Answers3