Effective way of using jQuery

Question

I am trying to modify the DOM via javascript. I've been suggested to use jQuery like this

    var options = $("<div>")
        .append(
            $("<ul>").append(
                $("<li>")
                    .text("Resolution: ")
                    .append(
                        $("<select>")
                            .append($("<option>")
                                .attr("value", $(window).width()+"x"+$(window).height())
                                .text("Window"))
                            .append($("<option>").text("1024x768"))
                            .append($("<option>").text("1280x1024"))
                    )
            )
    );

But I find it clunky, especially considering that it increases the amount of code to write of at leat 40% compared to just write to an html string and then add it. Is this the right way of using jQuery, or is there a best practice for DOM manipulation of this sort?

Answer 1

Typically this is the spot where I would tend to bring in a JavaScript templating library to complement jQuery. Knockout JS was always one of my favorites because it brought data binding with it, but there are many options.

If we are going to stay inside the context of jQuery, though, I might consider something like this:

 var html = "<div> \
              <ul> \
                 <li>Resolution: \
                     <select> \
                         {options} \
                     </select> \
                 </li> \
              </ul> \
             </div>";

// I am assuming that there is something dynamic here - if not, you can put it all in the first string.
var options = '<option value='; // etc.

$(html.replace('{options}', options)).appendTo(someSpot);

This does trade DOM manipulation for String manipulation, but I have usually found that to be a decent enough trade.

If the application is going to be of any size, it is really a good time to start making sure that you separate concerns so that you don't have DOM templating logic intermingled too deeply with your validations and business logic.

Answer 2

Following is the example code of the table using jQuery. You can refer to it and modify it as per your requirement. You can also use loops inside the jQuery code.

$(function(){
    var content = "<table>"
    for(i=0; i<3; i++){
        content += '<tr><td>' + 'result ' +  i + '</td></tr>';
    }
    content += "</table>"
    $('#here_table').append(content);
});