Why append the button?

Imagine a web browser with JavaScript switched off. Or your JavaScript doesn't download or get executed. The person would have no way to see the spoiler, so that's why the spoiler is visible first, but we use jQuery to hide it and add the additional markup . If the button was there and there was no jQuery functionality it would be a redundant button and could confuse the user.

Seems like the idea is to improve the experience for users that don't have scripts enabled. By appending the button with JavaScript, you prevent it from appearing if JavaScript can't be loaded. If you had it in the HTML and depended on JavaScript to hide it, the users without the ability to load the script would see the button that does nothing and they'd probably be a bit puzzled.

That said, you could probably also use CSS to hide the HTML button by default and use the JavaScript to show() it, but you'd still have useless HTML loaded for those that may already be on not-so-great devices or connections.

Sorry. My question wasn't worded very well.

I meant, what if you had the button as html markup without using append()... yet you still used jquery to hide it and do all the other stuff?

Sorry for the confusion and thanks for the response. You're awesome, love the videos man. Been watching a lot of you lately haha

I think appending elements should be last resort, because it causes document re flow. https://developers.google.com/speed/articles/reflow

Regarding developing the web for a no javascript visitor, he or she should be informed how enabling javascript will allow the best user experience. Enable-javascript.com is a handy info site one can direct users to if js is disabled. For example, this can be included in the html: "For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser: http://www.enable-javascript.com"

The following article conducted a survey on how some major sites and web applications look and work with Javascript disabled. It's an interesting study: "From a visual stand point, Facebook looks perfect. You can navigate and read most of the content of Facebook, including viewing photo albums. You cannot update your status; you cannot edit your profile; you cannot record videos of yourself, and there's no warning... Twitter looks great without Javascript, but guess what? You cannot tweet! Bummer. You also can't edit some of the settings in your profile... Google Search works well, however, Image results that come up on the top of the search results show up blank. I gotta say I am very surprised that this doesn't work perfectly. I mean, this is the Google!... Amazon is the one you gotta count on to do well in this. The site looks perfect. I've tested adding and update the shopping cart, which worked perfectly. I haven't actually gone all the way through and purchased something for this test, but I feel confident that everything would work... Hate to rub it in, but YouTube is a FAIL as well. You can still navigate the site, but not play any videos." http://wiki.futuretoby.com/How_Much_of_the_Web_Actually_Work_Without_Javascript

Consider the following discussion thread: "...if Yahoo!'s figures are correct then the question you have to answer becomes 'is this 2% of the on-line population valuable to me?' If their sample is representative of your user base then the answer might well be "no". If, however, you find that 10% or even 15% of your user base have JavaScript disabled then it may well be more worth your while catering for them." http://ux.stackexchange.com/questions/15140/is-it-ok-to-require-certain-users-to-have-javascript-enabled