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 Loops Working with 'for' Loops Dynamically Display HTML with a Loop

Spencer Renfro
PLUS
Spencer Renfro
Courses Plus Student 11,133 Points

Explanation of inner.HTML

I do not understand how main.innerHTML works. IS this targeting something in the index.html file?

1 Answer

Caleb Kemp
Caleb Kemp
12,754 Points

It is not targeting anything in the index.html file. When a website wants to render a page in the browser, it creates what is called a "Dom" object. To store all the values it will need. If it's displaying text, is the font bold or italic, what font size is it, etc.? All these are properties that the Dom must store. For each element on the page, the Dom will create an object for it with a list of all its values stored as properties. Well, when you put text inside of HTML tags i.e <p>TEXT</p>, the Dom will store that text in the object under the property name inner.HTML. So, since the object was referenced by the name "main", const main = document.queryselector('main'); (from line 1 of Guil's code), to get the text inside of its tags, you would write "main.innerHTML". Hope that helps a little bit :smile: