在 jQuery 脚本中避免 HTML-in-string / html()答案

【问题标题】：Avoiding HTML-in-string / html() in a jQuery script在 jQuery 脚本中避免 HTML-in-string / html()
【发布时间】：2011-11-09 18:22:37
【问题描述】：

我想使用 javascript 为我的网站制作一个基于 jQuery 的自定义弹出窗口。

我通过将 HTML 存储到 javascript 字符串变量中的弹出窗口中来对其进行原型化，然后显示该字符串：

$('#pop_div').html(string);

string 是这样定义的：

var string= '<div class="className">' +
    'HTML Content'+
'</div>'

我见过一些这样做的网站，但认为这是不正确的。

它适用于静态 html sn-ps 但不适用于 rails 使用生成的 html

将 rails 生成的 HTML 代码加载到 javascript/jquery 脚本中的最佳方法是什么？

谢谢

【问题讨论】：

【解决方案1】：

没问题

<script>var string = <%= escape_javascript(...) =>;</script>

因为escape_javascript 负责确保JavaScript 解释器正确解释原始字符串。

请注意，如果您想将其放入 onclick 处理程序而不是 <script> 元素中，您可能需要 escape_javascript 然后 HTML 转义结果。

【讨论】：

【解决方案2】：

将元素存储在变量中会更容易：

var el = $("<div class='className' />").html("HTML Content");

//append the element to the div
$("#pop_div").append(el);

【讨论】：

【解决方案3】：

如何分三步：

var htmlContent = 'HTML Content';

var elem = $('<div />').addClass("className").html(htmlContent);

$('#pop_div').empty().append(elem);

现在，我只使用 RoR 完成了“hello world”，但使用 Mike Samuel 的 escape_javascript 代码，这可能会满足您的需求。

【讨论】：