Dynamicaly append html code via javascript

Question

i built my own infinitescroll similar to the google image search. Everythings works fine. I only wanted to know if there is another way to append html code in javascript, especially when it is more than one row including javascript functions.

In the moment it loos like this:

appenddiv += '<div class="actbtn">'+
 '<a href="javascript:void(0)" onclick="OWNER.feedaction(\''+feedid+'\','action_delete')">'+
 '<img id="delicon_'+feedid+'" src="images/icons/delete.gif" title="'+delete_text+'">'+
 '</a>'+
 '</div>';

Is there another way to do this, cause this is just a very small example. I thought of a function where i can enter "normal" html code without the quotes ' and + and escaping \' etc. and then get the formatted code above.

Normal code:

<div class="actbtn">
 <a href="javascript:void(0);" onclick="OWNER.feedaction('{$profile_actions[actions_loop].action_id}','action_delete')">
 <img id="delicon_{$profile_actions[actions_loop].action_id}" src="images/icons/delete.gif" title="my text" />
 </a>
</div>

I am interesting in your ideas which other ways there are to do this.

• sp00m: Can you show how you would call your ideal function (i.e. the one you could enter "normal" html code)?
• Ruven JR. Maerson: @sp00m edited my post showing what i mean with normal html code

Answer 1

You could use "JavaScript Micro-Templating" where you add the html in a script tag in semi js format like this:

<script type="text/html" id="user_tmpl">
 <% some js %>
 some html
</script>

Take a look at John Resigs blog about how you can use it.

• Ruven JR. Maerson: ah this is what i meant before. hm interesting. you ve tried it?
• red-X: I have, yes, I found it a great way to separate html templates from actual js code.
• Ruven JR. Maerson: I will give it a try. i am wondering if the conversion is fast and without errors expecially when it includes js like in my example.
• red-X: I don't see any reason why your example shouldn't work, my implementation had some pretty complicated parts in it but it all worked fast and flawless so far.

Answer 2

In Jquery, you could use:

.append();

.html();

• Ruven JR. Maerson: i know. Im just interested in other ways to append html code. not how to do this generally.

Answer 3

You can use jquery html function like $("#parent_div_id").html(appenddiv);

$("#parent_div_id").append(appenddiv);