formatting jQuery strings that should span mulitple lines.

Question

One nice thing with jQuery is that the syntax (such as when chaining) allows your script to span multiple line breaks for ease of formatting and readability.

Is there an equivalent/preferred method when one is adding a large string of HTML?

For instance, it'd be nice to do something like this:

 $("#theObject")
    .doSomething()
    .append("
        <div>
             <div>
                  Hello World
             </div>
        </div>
    ")

That doesn't work but is there something akin to that to make it easier to read HTML being formatted within a jQuery script?

Answer 1

 $("#theObject")
.doSomething()
.append(
    "<div>"
         +"<div>"
              +"Hello World"
         +"</div>"
    +"</div>"
);

It'd be best practice to load your .append() content as a var, like so:

var append_me =
     "<div>"
         +"<div>"
              +"Hello World"
         +"</div>"
    +"</div>";

$("#theObject").doSomething().append(append_me);

Answer 2

Add a \ at the end of each line

$("#theObject").doSomething()
.append("
    <div>\
         <div>\
              Hello World\
         </div>\
    </div>\
")

Answer 3

var str  = '<div>';
str += '<div>';
str += 'Hello World';

$("#theObject")
    .doSomething()
    .append(str)

Answer 4

There is no elegant way of representing a nice HTML tree structure in Javascript using strings. You will simply have to use a bunch of concatenation, which is always going to be ugly, and might I add that it performs terribly. This is what I do:

1. Write my markup in my favorite editor with all the whitespace I want
2. Save it in the same location as your JS file, with the same name + ".txt" as the extension
3. My editor has find-and-replace with RegEx, so I do a replace-all with something like >[\s]*<
4. Copy the one-lined result over to my Javascript file as a string variable
5. Undo the replace on the .txt file

This implies, of course, that any time you change the markup you will need to re-do the replace and copy it over. I got into that habit pretty quickly, though. Additionally, jQuery will be able to process this faster because there will be less characters to parse.

Answer 5

If you're using jQuery, and your string literals are going to be html elements, you could also just create those elements directly on the page and hide them, then refer to those elements in the DOM instead of typing them out as strings. For example, you could put this on your page:

<div id="myContent" style="display: none;">
    <div>
        <div>
            Hello World
        </div>
    </div>
</div>

And then rewrite your code like this:

$("#theObject")
.doSomething()
.append(
    $('#myContent').html();
);

Alternatively you could append the actual DOM element itself if you only need to reference it the one time, instead of copying its contents every time.