javascript - 在 .html() 标签内格式化 html

Question

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

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

但是当我尝试格式化 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>")

我不确定问题出在哪里，如有任何帮助，我们将不胜感激!

Answer 1

对于任何复杂的 HTML，不要使用字符串连接，甚至不要使用字符串文字。他们是维护的噩梦。例如您的 i 元素未终止:

您可以简单地使用带有所需 HTML 的虚拟脚本 block :

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

并像这样使用:

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

type="text/template" 不是有效值，浏览器会忽略此 block (保持原样)。

对于您的复杂示例，您可以看到您仍然可以注入(inject) ASP.Net 内容，只是现在布局很明显(并且在页面中，而不是您的代码，它所属的位置):

<script type="text/template" id="mytemplate">
   <div class='alert alert-danger'>
       <p><i class='fa fa-times-circle fa-2x'>
           Incorrect! Yesterday was <%= @yesterday %>
          </i>
       </p>
       <p>Click Next to continue.</p>
   </div>
</script>