在javascript中设置一个等于变量的HTML字符串

Question

我声明了一个HTML字符串并将其设置为等于一个变量。我想不出任何理由，将产生一个错误，但在这里它是：

未捕获的SyntaxError：意外的标识上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> 
'; 

Answer 1

如果你想在你的实际代码换行符，使之更易于阅读，你将需要转义每一个用反斜杠，如：

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>\ 
'; 

或者你将需要连接它们作为单独的字符串，像这样：

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>'+ 
''; 

或者干脆把它全部在一行：

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>'; 

不容易阅读，但整洁你的JavaScript！

Answer 2

你可以做你想做的最接近的是逃逸换行符。

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>\ 
'; 

除此之外，还可以使用字符串连接。

（我发现了一个可能的重复：How to create multiline strings）

Answer 3

您使用jquery，因此，使用jQuery你可以把<li>在HTML页面中，并使用.html()方法得到的第一个元素的HTML内容匹配的元素集合或设置每个匹配的元素的HTML内容像这样

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

Answer 4

这是一个顽皮的PHP灵感的方法。 我在这里发布它作为一种心理锻炼。请不要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'));