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" />れます。

UPDATE 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 に答える