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

Posted by Hua Liu
Hua Liu
5,927 Points

jQuery $(".spoiler span").append("<button>spolier</button>") not working

In the index.html: <p class="spoiler"> <span>Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span> <span>Spoiler 2</span> </p>

In the app.js: $(".spoiler span").append("<button>Reveal Spoiler</button>");

This doesn't work. Why? Since $(".spolier span").hide() works...

1 Answer

Seth Chute
Seth Chute
13,749 Points

In this case the code calls for you to append the button just to the spoiler div, not the span inside the spoiler div like so:

$(".spoiler").append("<button>Reveal Spoiler</button>");

However, there is nothing wrong with appending the button to .spoiler span in theory, but because you've hidden the span element in the code prior to this line of code the button inside the span is hidden along with the span itself.

Hua Liu
Hua Liu
5,927 Points

Thank you. You ar right. This doesn't work because that the "span " is hidden:)