Why does any social site like Reddit use this method?

See what Reddit uses to add one of its buttons:

<script typ开发者_Python百科e="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>

This JavaScript adds an <iframe> to the page, then the <iframe> adds the HTML code.

Why doesn’t the JavaScript add the HTML directly?

To isolate the button's markup and style from the web site's own CSS rules.

This technique is called as unobstrusive linking of JavaScript. This is one of the good practices of designing a web-page with graceful degradation. The actual HTML doesn't carry any references to JavaScript, and JavaScript is not supposed to cause any content manipulation.

Another reason why the JavaScript is included at the end of file, is that the web page can show without waiting for the JavaScript to be completely downloaded. This is the exact complement to why CSS files are included in the beginning (to prevent content from showing up before styles are set.)