Set a string of HTML equal to a variable in javascript

Question

I declare a string of HTML and set it equal to a variable. I can't think of any reason it would generate an error, yet here it is:

Uncaught SyntaxError: Unexpected identifier on Ln 136.

Ln 136: new_comment = '
    <li class="photobooth-comment">
       <span class="username">
          <a href="#">You</a>
       </span>
       <span class="comment-text">
          ' + text + '
       </span>
       <span class="comment-time">
          2d
       </span>
    </li>
';

Javascript does not like linefeeds in strings. Change them to \n or escape them with \ if you need them — mplungjan, Feb 17 '13 at 09:30
http://stackoverflow.com/questions/13808042/which-browsers-support-multi-line-strings/13808106#13808106 — Andreas, Feb 17 '13 at 09:31
Alexander was first to answer (actually second after my comment but still deserves the tick for good answer). — mplungjan, Feb 17 '13 at 09:48
@mplungjan True; I saw Alexander had answered before me after I clicked submit for my answer. However, (without wanting to sound petty) my answer was more thorough and gave a variety of solutions. — guypursey, Feb 17 '13 at 09:55
Only with the one liner. The concatenation was mentioned. Not important... — mplungjan, Feb 17 '13 at 10:02

score 3 · Answer 1 · edited May 23 '17 at 10:33

The closest you can do to what you want is escaping the newline.

new_comment = '\
    <li class="photobooth-comment">\
       <span class="username">\
          <a href="#">You</a>\
       </span>\
       <span class="comment-text">\
          ' + text + '\
       </span>\
       <span class="comment-time">\
          2d\
       </span>\
    </li>\
';

Aside from this, you can also use string concatenation.

(I found a possible duplicate: How to create multiline strings)

score 3 · Accepted Answer · answered Feb 17 '13 at 09:33

If you want to include line breaks in your actual code to make it easier to read, you're going to need to escape each one with a backslash, e.g.:

var new_comment = '\
    <li class="photobooth-comment">\
       <span class="username">\
          <a href="#">You</a>\
       </span>\
       <span class="comment-text">\
          ' + text + '\
       </span>\
       <span class="comment-time">\
          2d\
       </span>\
    </li>\
';

Or you're going to need to concatenate them as individual strings, like so:

var new_comment = ''+
    '<li class="photobooth-comment">' +
       '<span class="username">' +
          '<a href="#">You</a>' +
       '</span>' +
       '<span class="comment-text">' +
          text +
       '</span>' +
       '<span class="comment-time">' +
          '2d' +
       '</span>' +
    '</li>'+
'';

Or simply put it all on one line:

var new_comment = '<li class="photobooth-comment"><span class="username"><a href="#">You</a></span><span class="comment-text">' + text + '</span><span class="comment-time">2d</span></li>';

Not so easy to read but neater for your JavaScript!

Bhushan Firake · Answer 3 · 2013-02-17T09:43:04.243

0

You are using jquery, So, with jquery you can put the <li> in your HTML page and use .html() method that gets the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element like this

 var new_comment = $(".photobooth-comment").html();
   //do what you want to

edited Feb 17 '13 at 09:43

answered Feb 17 '13 at 09:37

Bhushan Firake

9,338
5
44
79

1

I didn't downvote you. But, you are not considering the `text` variable. So, this is prone to fail – Alexander Feb 17 '13 at 09:43

score 0 · Answer 4 · answered Feb 17 '13 at 09:43

0

Here is a naughty PHP inspired method. I post it here as a mental exercise. Please do not downvote...

DEMO

var new_comment; /*<<<EOF 
    <li class="photobooth-comment">
       <span class="username">
          <a href="#">You</a>
       </span>
       <span class="comment-text">
          $text
       </span>
       <span class="comment-time">
          2d
       </span>
    </li>
EOF*/
// note the script tag here is the hardcoded as the first tag 
new_comment=document.getElementsByTagName('script')[0].innerHTML.split("EOF")[1]; 
alert(new_comment.replace('$text','Here goes some text'));

answered Feb 17 '13 at 09:43

mplungjan

169,008
28
173
236

"*... I leave the replacement of the text var as an exercise for the reader...*," are you kidding me? If that's the case this is not the correct place for this – Alexander Feb 17 '13 at 09:46
That's a naïve way. But, ok, nice try :) – Alexander Feb 17 '13 at 09:48
I know it works. But, you just added another layer of complexity. For instance, `$text` as a string and `$text` as a variable can't be differentiated – Alexander Feb 17 '13 at 09:52

Set a string of HTML equal to a variable in javascript

4 Answers4