formatting jQuery strings that should span multiple 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

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.

Answer 2

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

This can be done easier!

Don't use the "+" or the "/".

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).