string - jQuery template rendered output -

when pass html elementals strings in object not converted elements upon rendering, template gets filled this

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

if pass dom elementals get

<tr><td>[object htmlimageelement]</td></tr> 

how can actual image rendered dom element ?

using jquery template plugin should reduce html string building usage.

edit: simple example below grabs dom elements , gives jquery template, renders it.

source 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 template

<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)); 

output

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

as can see anchorelement () broken , image not displayed.
js fiddle example

so problem how underlying html dom element. can use outerhtml property this:

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

which should return <img src="path/pic2.png" title="picture 2" /> string.

update jquery templating engine automatically escapes values before displaying, display raw html without escaping need modify templates:

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

(outerhtml still needed)