Javascript 格式化html inside.html（）标记

在JavaScript回调函数中，我在页面上显示一条成功/失败消息。当我将HTML内容放在一行中时，如下面的代码所示，消息被添加，一切正常

$('#message').html("<div class='alert alert-danger'><i class='fa fa-times-circle fa-2x'>Incorrect!</div>")

$（'#message'）.html（“不正确！”）

但是当我试图格式化HTML以获得更好的可读性时，如下图所示，什么也没有发生，我在Firebug控制台中没有看到我试图添加的消息，也没有看到任何错误消息

 $('#message').html("<div class='alert alert-danger'>
                              <p><i class='fa fa-times-circle fa-2x'>
                                Incorrect! Yesterday was " + <%= @yesterday %> +
                             "</p>
                             <p>Click Next to continue.</p>
                         </div>")

$（'#message'）.html（“

不正确！昨天是“++
"

单击“下一步”继续

")

---

我不知道是什么问题，任何帮助都是感激的

据我所知，JavaScript不允许以字符串文本形式返回文本：

var foo = "Not
valid";

必须用转义序列替换它们：

var foo = "Yes\nit's valid";

。。。好的旧弦扭伤：

var foo = "Yes " + 
    "it's valid";

。。。或两者兼而有之：

var foo = "Yes\n" + 
    "it's valid";

您的代码应触发一个明确的语法错误：

SyntaxError:未终止的字符串文字

确保你确实检查了控制台

编辑：正如GolezTrol在这篇评论中指出的，如果转义原始换行符，实际上可以使用原始换行符（尽管字符串中没有字符本身）：

---

对于任何复杂的HTML，不要使用字符串连接甚至字符串文字。它们是维护的噩梦。e、 g.您的

i

元素未终止：

您可以简单地将虚拟脚本块与所需的HTML一起使用：

<script type="text/template" id="mytemplate">
    <div class='alert alert-danger'>
               <i class='fa fa-times-circle fa-2x'>Incorrect!</i>
    </div>
</script>

type=“text/template”

不是有效值，浏览器会忽略此块（保持其完整性）

对于复杂的示例，您可以看到仍然可以插入ASP.Net内容，只是现在布局很明显（在页面中，而不是代码中，它所属的位置）：

不对！昨天是

单击“下一步”继续

我将首先单独构造html变量。e、 g

var text = 'Incorrect! Yesterday was " + <%= @yesterday %> + "';                          
var html = $('<div>').addClass('alert alert-danger').append(
               $('<p>').append(
                   $('<i>').addClass('fa fa-times-circle fa-2x')
                           .text(text)
                   )
               )
               ...
           );

---

至少它使您不必指定和维护单独的模板。

使用此工具。UI一开始有点让人不知所措，但它是一个救命稻草：

---

将html粘贴到html框中，点击“转换”按钮，然后从底部的“javascript转义”框复制生成的代码。这是您应该作为参数传递给.html（）的代码

或者您可以使用函数来完成此操作

function getErrorMessage(pMessage){
  return "<div class='alert alert-danger'>"
       + "<p><i class='fa fa-times-circle fa-2x'>"
       +  pMessage
       + "</i></p></div>";
}

函数getErrorMessage（pMessage）{
返回“”
+“”
+pMessage
+“
”；
}

你可以这样说：

$('#message').html(getErrorMessage('Incorrect! Yesterday was <%= @yesterday %>.'));

$（'#message'）.html（getErrorMessage（'不正确！昨天是'）；

您可以更改/改进“getErrorMessage”以接收更多参数和更改图标等。

---

希望能有所帮助。

在每行末尾添加/从…lert danger'>到…继续。

是的，js在多行文本方面有问题。您必须像@artm所说的那样在每一行末尾添加

/

，或者连接每一行。这与html无关，但与JavaScript通常接受多行字符串的方式有关。请参阅：可能重复的感谢！您将不得不使用反斜杠\并且它似乎有效。您仍然存在注入ASP.net值的问题（

）我看到您的更正，但现在您遇到了jQuery必须始终在页面中的问题（也是一个维护/调试问题）。我有时使用PHP做类似的事情：将模板保存在外部文件中，并使用

json\u encode（）

将它们注入变量。谢谢！这是一个更干净的方法，只会使用这个！

var text = 'Incorrect! Yesterday was " + <%= @yesterday %> + "';                          
var html = $('<div>').addClass('alert alert-danger').append(
               $('<p>').append(
                   $('<i>').addClass('fa fa-times-circle fa-2x')
                           .text(text)
                   )
               )
               ...
           );

$('#message').html(html);

function getErrorMessage(pMessage){
  return "<div class='alert alert-danger'>"
       + "<p><i class='fa fa-times-circle fa-2x'>"
       +  pMessage
       + "</i></p></div>";
}

$('#message').html(getErrorMessage('Incorrect! Yesterday was <%= @yesterday %>.'));