current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

This question already has an answer here:

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>
';
share|improve this question

marked as duplicate by Alexander, Juhana, Vohuman, François Wahl, Kriem Feb 17 '13 at 10:09

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1  
Javascript does not like linefeeds in strings. Change them to \n or escape them with \ if you need them –  mplungjan Feb 17 '13 at 9:30
    
stackoverflow.com/questions/13808042/… –  Andreas Feb 17 '13 at 9:31
    
Got "text" variable defined? –  roomcays Feb 17 '13 at 9:32
    
Alexander was first to answer (actually second after my comment but still deserves the tick for good answer). –  mplungjan Feb 17 '13 at 9: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 9:55

4 Answers 4

up vote 2 down vote accepted

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!

share|improve this answer
up vote 3 down vote

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)

share|improve this answer
up vote 0 down vote

You are using , 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
share|improve this answer
    
@Downvoter Explain? –  Bhushan Firake Feb 17 '13 at 9:38
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 9:43
up vote 0 down vote

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'));
share|improve this answer
    
"... 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 9:46
    
See update..... –  mplungjan Feb 17 '13 at 9:47
    
That's a naïve way. But, ok, nice try :) –  Alexander Feb 17 '13 at 9: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 9:52

Not the answer you're looking for? Browse other questions tagged or ask your own question.