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
Alsaig Sandra
Front End Web Development Techdegree Graduate 15,434 PointsWhy is there a [0] in let ul = document.getElementsByTagName('ul')[0]; ???
My code works fine, I followed Guil .. but I'm not 100% understanding this part of the code and I'm wondering if someone could help me with it. I understand that we have to specify the 'ul' tag in order to create the child element, but I don't understand why there's a [0] after the "ul" variable.. and I'm not really clear on these 2 lines either.
li.textContent = addItemInput.value; ul.appendChild(li);
I'm thankful for any bit of help.. Happy coding to all!
3 Answers
Lisa Walters
Front End Web Development Techdegree Graduate 15,255 PointsHi Sandra,
I'm practicing answering questions, so I hope this is OK! I think that the [0] would be more clear if there was more than 1 ul element in the HTML. If there were two unordered lists in the HTML then the first returned in the collection would be [0], and the second ul would be labeled as [1]. Since there is only one ul in the HTML, we still need to call it as ('ul')[0] because the getElementsByTagName returns a collection, which is like an array.
To answer your other questions: li.textContent = addItemInput.value; // this is where the text content of the li element is assigned the value of the text that is typed into the addItemInput input area. So, li might be assigned the string "blueberries".
ul.appendChild(li); // this is where the newly created li is actually added to the DOM, by "appending" the li to the parent ul node. So after this line of code, we can actually see the new li element listing "blueberries" in the DOM.
I hope this helps!
Peter Vann
36,426 PointsHi Sandra!
The answer is in the name. Notice that in document.getElementsByTagName that Elements is plural, meaning the function/method returns a collection of all the elements with that tag name. The collection is zero-based, and therefore, document.getElementsByTagName('ul')[0] will only return the first ul in the collection (in the DOM/on the page). Does that make sense?
More info:
https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName
I hope that helps.
Stay safe and happy coding!
Lisa Walters
Front End Web Development Techdegree Graduate 15,255 PointsGlad it helped! :)
Alsaig Sandra
Front End Web Development Techdegree Graduate 15,434 PointsAlsaig Sandra
Front End Web Development Techdegree Graduate 15,434 PointsHi Lisa Walters! Thank you for explaining it to me!:) I am starting to get a grasp on all these selections and manipulations slowly and steadily but I gotta say, you are great at explaining the concept! :) I'm sure you'll be helping a lot of us on our way!! :) Thanks again! Hope you have a lovely week!