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?

  • 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 Sep 22 '16 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 Sep 22 '16 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 Sep 22 '16 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 Sep 22 '16 at 16:14
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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