chrome & safari 中的 JQuery insertAfter 导致内容作为字符串插入

Posted 2023-05-09

【中文标题】chrome & safari 中的 JQuery insertAfter 导致内容作为字符串插入

【英文标题】：JQuery insertAfter in chrome & safari causes the content to be inserted as String

【发布时间】：2014-12-03 07:08:04

【问题描述】：

我正在使用 jQuery 将行动态插入到表中。该行本身是一个（文本）模板，它会替换里面的一些东西，然后“投射”到一个 jQuery DOM 节点。虽然这在 Firefox 和 IE 中运行良好：

jQuery(jQuery.parsehtml(node)).insertAfter("#imgTable tr:last()");

Chrome 和 Safari 不会插入节点，而是将 HTML 作为字符串插入。这样我就不会获得一排，错误的一个可靠的 html 源代码块......这是一个 UX 灾难:)

非常简单的复制： http://jsfiddle.net/288sp1qb/4/

---

...我已经发现错误的根源是我将模板存储在<noscript> 标记中。我必须这样做，因为我知道的所有其他标签都被解释了，所以大多数浏览器要么删除 <tr> 和 <td> 标签，要么修改内容。

将模板存储在变量中也不是一种选择，因为模板已经包含一些后端生成的数据。 所以实际的问题是：如何让 webkit 浏览器在插入数据后解释它们？或者：否则我应该如何存储模板？

【问题讨论】：

这里的实际目标是什么？您的解释不清楚，而且您在小提琴中展示的方法似乎很不正统。

解析成模板的内容是服务器端和客户端的一部分内容，模板本身是交付的html的一部分，便于访问。

@Mr.Manhattan 请看看我在回答部分发布的答案。

【参考方案1】：

HTML 代码 -

<table id="table">
    <tr>
        <th>bsp.</th>
    </tr>
</table>
<noscript id="tpl" style="display:none">
     <tr><td>%VAR%</td></tr>
</noscript>

jQuery 代码 -

var node = $("#tpl").text();
node = node.replace("%VAR%","test");
$($.parseHTML(node)).insertAfter("#table tr:last()");

JSFiddle - http://jsfiddle.net/Ashish_developer/s35ppva8/

此解决方案在所有浏览器中都运行良好。

【讨论】：

一个“使用 .text() 代替 .html()”就足够了，不过还是谢谢，这很好用。