formatting jQuery strings that should span multiple lines

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 equivale开发者_JS百科nt/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?

Add a \ at the end of each line

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

Edit 2016:

If you're using ES6 (ES2015), you now can use template literals.

 $("#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);

This can be done easier!

Use template literals: `

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

Documentation on template literals can be found here.

As @Geuis commented, this can only be used from es2015/ES6 (Can I use template literals).

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.

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.

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

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