Question

I’ve been working on an app and I noticed I tend to create DOM objects in JavaScript/jQuery and then doing appendTo(‘body’) like so:

$list = $('<ul/>', {
    id : "thelist",
    class : "listclass"
}
$list.appendTo('body');
$list.html(whateverAjaxStuff);

and my page source ends up just being a head with an empty body tag.

I’m just wondering if there are any advantages/disadvantages to this method. Should I be building the basic framework in HTML then just manipulate the innerHTML with JavaScript instead? Thoughts?

EDIT: Wanted to clarify. I’m only doing this with stuff that has to be generated dynamically. $list elements are loaded with AJAX, the user makes a selection which populates another list, etc.

Link if anyone is still interested

Answer 1

I don’t think the other answers above really persuade enough as to why you definitely shouldn’t do what you are doing now. There are so many reasons not to do this;

1. SEO (Search Engine Optimisation)
2. Speed
3. Javascript disabled browsers
4. WYSIWYG editors (This may speed up your development a lot, and they won’t work with your method)
5. Far easier to debug & get help with – If you asked for help on Stackoverflow with your code above, very few people will help you.
6. Lets mention speed again – It’s important to minimise the amount of processing which needs to happen before anything displays, sites with heavy JS processing (Adverts, etc) are very painful to browse on a slow computer.

I can’t think of any reason to construct all of your page using jQuery, you appear to be attempting to emulate what happens server-side (Ruby, ASP.net, PHP etc)

You may want to edit the DOM from JS.. but constructing it entirely from scratch is a very bad idea!