javascript - What is an efficient way to inject j/s variables into a reusable block of HTML without mixing the two in a j/s file? -

basically, have autocomplete function users select item. when select item, series of variables relating item saved. once click 'add', variables injected html template, , html template injected dom. question is, how can without having mix html code j/s code i.e. var example = "<div id='" + divid + "'></div>"; (etc.) hope question clear enough.

have looked jquery templates? it's client-side data binding, seems trying do.

for example, can stuff this..

assuming have list of song objects, defined as:

var song = {   title : 'purple rain',   artist : 'prince' }; 

html:

<!-- template definition --> <script id="tmpl_songlist" type="text/html">   <li>     <a>         <span>${title}</span>         <span>${artist}</span>     </a>   </li> </script>  <!-- html container host data-bound list --> <ul id="song_list"></ul> 

js:

// bind data (songlist) , append html container. $.tmpl($('#tmpl_songlist'), songlist).appendto($('#song_list'));