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
vamosrope14
14,932 PointsSince when is input a child of label? They are written out as siblings in HTML.
.
4 Answers
Steven Parker
229,744 PointsAssuming the "input" you're talking about is the checkbox, it is attached to the DOM as a child of the label on line 15:
label.appendChild(checkbox);
And these elements are dynamically created by the JavaScript and do not exist in the HTML code.
vamosrope14
14,932 Points.
Steven Parker
229,744 PointsIt's also not the case here. It's the input that is the child of the label.
vamosrope14
14,932 Points.
Steven Parker
229,744 PointsThe advantage of making the input be the child of the label is that it allows you to click on the label text to change the state of the checkbox.
When they are created as siblings, you can only change the state by clicking directly on the box.
vamosrope14
14,932 Points.
Steven Parker
229,744 PointsEvent propagation ("bubbling") goes from child to ancestor(s). This is different because a click on the label (parent) changes the state of the checkbox (child).
This special action of a label can also be used on peers (siblings) by using the "for" attribute of the label.