1

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

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

如果我通过 DOM 元素，那么我会得到

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

如何获取呈现为 DOM 元素的实际图像？

使用 jQuery 模板插件应该有助于大大减少 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小提琴示例

4

2 回答 2

3

所以基本上问题是如何从 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仍然需要）

于 2010-11-15T21:23:05.853 回答
-2

这是一些工作代码的示例：

<td class="test"></td>
<script>
  $('.test').append('<img src="path/pic.png">');
</script>
于 2010-11-15T19:34:02.323 回答