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
Zhenghao He
Courses Plus Student 2,389 PointsWhy 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
9,010 PointsI 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
Full Stack JavaScript Techdegree Student 11,638 PointsAnswer 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:)