Here’s an example page:
<html>
<head>
<title>WEB PAGE TITLE</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
</html>
Would it be better (performance-wise) to write out the body like this:
<body>
<div id="element"></div>
</body>
Or to have jQuery do it like this:
$(document).ready(){
$('html').append('<body />');
$('body').append('<div id="element" />');
};
It is 100% always better to write the HTML directly, for more than just performance reasons.
Talking strictly performance, if you write the body directly it is loaded much quicker. If you use JavaScript (jQuery, etc.), it won’t be processed until most of the HTML is read, blah blah so it’ll be much (relatively) slower.
Also, if you use JavaScript to write that content, if a user has JavaScript disabled they will see nothing. Not cool. You always want to go the progressive enhancement route, which is basically get everything working at a basic level without JavaScript, than add JavaScript to enhance that functionality when it is available.