Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM (Retiring) Traversing the DOM Getting All Children of a Node with children

Why is lis automatically updated after adding a new list item?

I have two questions about the teacher's code.

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

here , we selected ul to add the new list item. but we declared a similar variable at the top before const listUl = listDiv.querySelector('ul'); why don't we just use listUl here? it would be listUl.appendChild(li); it worked out fine I tried. Is there any reason behind not using this?

Another question is, I tried to track the lis variable during this addItemButton event. and I logged out lis like this

addItemButton.addEventListener('click', () => {
  console.log(lis);
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  attachListItemButtons(li);
  ul.appendChild(li);
  addItemInput.value = '';
  console.log(lis);
});

and I found lis is updated after this event. I totally confused. from my understanding it's been declared at the top as in the first place

const lis = listUl.children;

why is it automatically updated after we append a new list item to ul?

2 Answers

Scott Junner
Scott Junner
9,010 Points

I recall mention in the very early part of the JavaScript course something about lists still being mutable even though they are declared as const. I think the only thing const prevents with lists is reassignment...? Maybe?

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,625 Points

Answer to your first question --
Yes , you are right . You can use listUl here and you will get the same result as both document.getElementsByTagName('ul')[0] and listDiv.querySelector('ul') will give you the refrence to the first ul of div with class list.
Now why not Guil used listUl ?
Because listUl is introduced in first video of Traversing the DOM(which is the last part of this course) while

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

was introduced in Appending Nodes part of Making changes to the DOM (which is the second last part of this course).
What i want to say is , when ul.appendChild(li) was used , listUl has not been introduced yet. listUl was introduced later in the last part(JS and the DOM).

That was the reason . If you have followed the whole course , you should not have this doubt.

Now answer to your question--
The ParentNode property children is a read-only property that returns a live HTMLCollection which contains all of the child elements of the node upon which it was called.
A HTMLCollection which is a live(means any changes to the element will be updated automatically), ordered collection of the DOM elements which are children of node. Hope it helps .
Happy Coding Zhenghao:)