Question

当我将HTML元素作为字符串传递给我的对象时，它们在渲染时不会转换为元素，因此我的模板会像这样填充

<tr><td>"<img src="path/pic.png" />"</td></tr>

如果我传递DOM元素，那么我得到

<tr><td>[Object HTMLImageElement]</td></tr>

如何将实际图像呈现为DOM元素？

使用jQuery Template插件应该有助于大大减少HTML字符串构建的使用。

修改：下面的简单示例抓取DOM元素，然后将其提供给呈现它的jquery模板。

源HTML

<div id="source-id"><a href="http://link/to/this.file" title="foo">bar</a> <img src="path/pic1.png" />pic1_text <img src="path/pic2.png" title="picture 2" />pic2_text</div>
<div id="target-id"><div>

jquery模板

<script type="text/x-jquery-tmpl" id="linkTemplate"><table><tr><td>${link}</td><td>${img}</td></tr></table></script>

jquery的

var data = {
 'link': '',
 'img': ''
};
var source_data = $('#source-id');
data.link = $(source_data).find('a').eq(0).clone()[0];
data.img = $(source_data).find('img').eq(1).clone()[0];
$('#target-id').html($('#linkTemplate').tmpl(data));

输出

<table><td>http://link/to/this.file</td><td>[object HTMLImageElement]</td></table>

正如您所看到的，AnchorElement（）已断开且图像未显示 JS fiddle example

Answer 1

所以基本上问题是如何从DOM元素获取底层HTML。您可以使用outerHTML属性：

data.img = $(source_data).find('img').eq(1).clone()[0].outerHTML;

应该将<img src="path/pic2.png" title="picture 2" />作为字符串返回。

<强>更新 JQuery模板引擎在显示之前自动转义值，在不转义的情况下显示原始html，你需要修改模板：

<script type="text/x-jquery-tmpl" id="linkTemplate">
    <table><tr>
        <td>{{html link}}</td>
        <td>{{html img}}</td>
    </tr></table>
</script>

（仍然需要outerHTML）

Answer 2

以下是一些工作代码的示例：

<td class="test"></td>
<script>
  $('.test').append('<img src="path/pic.png">');
</script>

jQuery模板呈现输出

2 个答案: