JavaScript tip of the day: Extending a String Across Multiple Lines

June 17th 2010

I’m working on a project where I need to inject qui a bit of HTML. The examples will feature jQuery but it works with any library as it is simply string handling in javascript.

So the problem we face is that a string of content on a single line is hard to read. Something like that:

$(element).append('<div class="content"><div class="left"></div><div class="right"></div></div>');

It’s really not easy to maintain as you  have to figure out where in the HTML structure you want to add new elements.

So here’s the tip

To keep the HTML cleanly formatted simply add a backslash after every line. This way you escape the new line feed and the javascript thinks everything is on a single line. Here’s an example:

$(element).append(' \
  <div class="content"> \
    <div class="left"> \
    </div> \
    <div class="right"> \
    </div> \
  </div> \

It’s a very nice way to keep the HTML structured to make sure the code is easily maintainable.

Hope you liked it 🙂

27 Responses to “JavaScript tip of the day: Extending a String Across Multiple Lines”

  1. […] This post was mentioned on Twitter by Stephane Caron, Anton Pawlik. Anton Pawlik said: RT @scaron: JavaScript tip of the day: Extending a String Across Multiple Lines […]

  2. Nice to know, thanks for sharing!

  3. I thought it was pretty clever when i found that trick in your PrettyPhoto (or was it PrettyGallery?).

    Nice find.

  4. Hi,
    I used to use that trick, but I found myself in great trouble while I was trying to compress the code with google closure compiler or jsmin.
    I don’t know why, but at the end it gives a whole bunch of errors, so I now stick with this way of writing strings over multiple lines:

    var myString= ‘lorem ipsum ‘+
    ‘lorem ipsum again ‘+
    ‘and again’;


  5. Stephane says:

    @Davide: Never had any problem with compression. I always use jsmin, never compressed with Google closure yet. The only thing is that it don’t compressed the escaped string. No big deal.

  6. I totally agree with everything you have explained. In reality, I browsed through your several other posts and I do think you’re certainly right. Great job with this particular site.

  7. Bookem says:

    Thanks for the backslash tip. I’ll try it next time. I usually try HTML in the sandbox first.

  8. Jeff C says:

    Awesome tip, and just what I needed :). Thank you.

  9. Its like you learn myy mind! You appsar to know a lot about this, such as youu
    wrote the e book in it oor something. I believe that you simply cann do with a feww
    percent to drive the message home a little bit,
    however otherr than that, this is excellent blog. An excellent read.
    I will deefinitely be back.

  10. Melvin says:

    Nice way to keep the HTML structured to make sure the code is easily maintainable is exactly what I was looking for at because my project stuck so far!

  11. sameer sharma says:

    Good article.

  12. I am happy to get knowledge on javascript.

  13. maje says:

    I recommend you to check this out if you need to write your math homework soon. It was helpful for me and my friends in college.

  14. blakelively says:

    Javascript is handled by the internet browser program not by a simple on and off switch. Each user can enable or disable javascript within Firefox, Internet Explorer, Modzilla, Opera or whatever web broswer they use (as long as they have the permissions to do it, they must be the administrator Assignment writer service uk.

  15. blakelively says:

    Javascript is dealt with by using the net browser software not through a easy on and stale transfer. Each person can enable or disable javascript within Firefox, Internet Explorer, Modzilla, Opera or anything web broswer they use as long as they’ve the permissions to do it, they need to be the administrator” Assignment writer service uk.

  16. JavaScript is among the most powerful and flexible programming languages of the web. It powers the dynamic behavior on most websites, including this one:Get all Computer programming languages

  17. javascript says:

    To avoid loading more JavaScript than you need, bundle your scripts into a single file using a solution like Browserify. In general, reducing the number of HTTP requests is very good for performance.

  18. seo says:

    thanks and it was nice to see the cool updates about java as i am interesting learning from stuff from sites like yours.

  19. JAV Pune says:

    Awesome Trick, Excellent Blogpost for JAVA Script

  20. kids cars says:

    Thanks for cool tips about the Java Script in your article, it really helps

  21. Great Blog! Found useful for my studies.

  22. The -E option enables extended regular expression syntax, alleviating the need to add backslashes …

  23. Java Course says:

    Great Post! Very informative !!

  24. Monika Jacob says:

    It hard for me to understand this. Can you make a video on this?

  25. Join the best SEO Course in Mumbai. Visit our website and learn the art of SEO.

Leave a Reply