Question

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

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

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

4 个答案: