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

Alexandra Velez
seal-mask
.a{fill-rule:evenodd;}techdegree
Alexandra Velez
Front End Web Development Techdegree Student 9,313 Points

Outside of being concise, why would you want to use JavaScript instead of HTML to create the buttons?

I appreciate how the JS streamlines the code, yet it worked just fine with the HTML version of the buttons. Why would it make more sense to use JS for the buttons, beyond being concise?

2 Answers

Hi Alexandra,

Great question. Beyond being concise, there’s at least one other reason I’d personally consider using JS to create the buttons in this particular situation.

But first I’ll stress the importance of being concise. Consider an app/page that starts off with not just four list items, but with 100 list items. The amount of extra HTML you would have to code by hand (to add the buttons) would be pretty extreme in comparison.

But a reason outside of just being concise would be one of accessibility and user experience. Say for instance I have Javascript disabled in my browser (in this example I’m using a work computer or one from a library). Well if the buttons are hard coded into the HTML, then I have a set of buttons that show up on the page that suggests I can use them to change the order of (or delete) the buttons on the page, even though I would not be able to because of the limitations imposed on my browser. However, if the buttons are added via Javascript, then they only show up in cases where the browser will recognize and execute the Javascript code.

So when JS is disabled, only the list items show up and I have no idea that in some browsers users are able to move those items around or even delete them. And when JS is enabled, the buttons show up and work as seen in the video.

Does that offer any insight?

I’m sure there are other reasons you might would add all of those like buttons in JavaScript, but off the top of my head those would be the primary reasons for me choosing to do it that way.

Alexandra Velez
seal-mask
.a{fill-rule:evenodd;}techdegree
Alexandra Velez
Front End Web Development Techdegree Student 9,313 Points

Yes, thank you for pointing out how the user experience is better with JavaScript by not showing the buttons in the event that JS is disabled by the end user.