1

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?

Improve this question
4
  • This is useless. You're writing HTML in JS anyway, might as well do it in one line. Also this is bad as for performance.
    – Steve Chamaillard
    Commented Sep 22, 2016 at 14:16
  • @SteveChamaillard Ok, but the alternative is to have a bunch of strings and concatenations, which becomes unreadable for other reasons... Is there anything like a python .format() for strings in javascript? What is the recommended way of doing these manipulations?
    – Stefano Borini
    Commented Sep 22, 2016 at 14:47
  • 2
    You don't usually do so many manipulations. Usually if there are a lot of manipulations you're better off returning a template and replace it with the old one rather than create a whole new one. If you still have to do them, you should put DOM elements in objects and use those, that'll promote reusability and prevent duplication which is one of jQuery worst pitfall.
    – Steve Chamaillard
    Commented Sep 22, 2016 at 15:47
  • You could have everything down to the <select> as a literal, generate the options from a list of resolutions and plug them in.
    – Caleth
    Commented Sep 22, 2016 at 16:14

2 Answers 2

Reset to default
2

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.

Improve this answer
0

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);
});
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.