Question

我正在使用jQuery动态地将行插入表中。行本身是一个（文本）模板，它将一些内容替换掉，然后“转换”为一个jQuery DOM节点。虽然这在Firefox和IE中运行良好：

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

Chrome和Safari不会插入节点，而是将HTML插入字符串。这种方式我没有获得一排，错误的html源代码块......这是一场用户体验灾难：）

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

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

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

Answer 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/

此解决方案适用于所有浏览器。

jQuery insertAfter in chrome＆amp; safari导致内容作为String插入

1 个答案: