How can I concatenate multiline string in javascript?

Question

There are lots of results for the correct syntax for appending <li>'s, however I am trying to find a solution where +this['name']+ values are included in the <li>'s. firebug is displaying 'SyntaxError: unterminated string literal' and jslint is displaying 'Unclosed string'. I've tried many different variations of the placements of the commas but I haven't been able to get it to work.

 $.each(data.result, function() {
     $("ul").append("<li>Name: "+this['name']+"</li>
                     <li>Age: "+this['age']+"</li>
                     <li>Company: "+this['company']+"</li>
                     <br />");
 });

Thank you.

Simon Boudrias · Accepted Answer · 2012-11-03 02:45:33Z

12

you can escape end of line with backslash character \, like so:

 $.each(data.result, function(){
 $("ul").append("<li>Name: " + this['name'] + "</li> \
     <li>Age: " + this['age'] + "</li> \
     <li>Company: "+this['company']+"</li> \
     <br />");
 });

This is due to the fact that Javascript automatically insert semi-columns sometime on line end. And in this case, you string weren't close. Another solution is to close each string on each line, and using + to concat them all.

 $.each(data.result, function(){
 $("ul").append("<li>Name: " + this['name'] + "</li>" +
     "<li>Age: " + this['age'] + "</li>" +
     "<li>Company: "+this['company']+"</li>" +
     "<br />");
 });

(Unrelated, but you <br/> aren't allowed inside a <ul> element)

answered Nov 3, 2012 at 2:45

Simon Boudrias

44.9k16 gold badges109 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ian Over a year ago

Definitely go with the second solution proposed here

Simon Boudrias Over a year ago

@Ian Yep, second solution is the one we see the most. Although, first solution work as well: davidwalsh.name/multiline-javascript-strings

Ian Over a year ago

You're right that the first solution works too, I'm not sure how well supported it is. I saw a question like this that had this same problem and I know someone proposed using `` but it wasn't compatible everywhere (or something like that). Might as well go with the safe way

Paramore Over a year ago

I think the second solution is slower

MagePal Extensions · Accepted Answer · 2012-11-03 02:52:57Z

0

This should be much faster

 li = '';
 $.each(data.result, function(){
     li += "<li>Name: " + this['name'] + "</li>" +
          "<li>Age: " + this['age'] + "</li>" +
          "<li>Company: "+this['company']+"</li>" +
          "<br />"; // could remove this and use css
 });

 $("ul").append(li);

See http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

answered Nov 3, 2012 at 2:52

MagePal Extensions

17.7k2 gold badges50 silver badges62 bronze badges

Comments

Brad · Accepted Answer · 2012-11-03 05:30:50Z

0

You actually don't want to concatenate this at all! Consider for a moment what will happen to variable data that contains HTML or HTML-like data. Using your method, it will be parsed as such, possibly breaking things and even opening you up to XSS attack methods.

You're already using jQuery, so the proper way is easy:

$('ul').append(
    $('<li/>').text('Name: ' + this.name), 
    $('<li/>').text('Age: ' + this.age),
    // etc.
);

(Note: I believe .append() allows as many parameters as you give it. If not, try using an array of elements as you append.)

answered Nov 3, 2012 at 5:30

Brad

164k57 gold badges380 silver badges559 bronze badges

Collectives™ on Stack Overflow

How can I concatenate multiline string in javascript?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related