I'm trying to properly use HTML5 templates in a webpage. However, I discovered that when I take the content of a template and put it into some section of the webpage, the template is emptied and the same action can't be performed again. How do I ensure the template isn't emptied, or should I be using a different technique?
Example
HTML:
<div>
<button id="replace-button">Click to show template</button>
<div id="holder"></div>
</div>
<template id="my-template">Hooray! Now, note that when you try again, this area will be blank.</template>
JavaScript:
$("#replace-button").click(replaceWithTemplate);
function replaceWithTemplate(event) {
$("#holder").html($("#my-template")[0].content);
}
Live demo: http://jsfiddle.net/Supuhstar/y33a9/