html template tag and jquery

Question

I've got this situation where I'm trying to use the <template> tag in my html source:

<template id="some-id">
  <div id="content-container">
    <span>{{some_string}}</span>
  <div>
</template>

This ends up placing the template in the document but it is not considered to be in the DOM. This means that $("#content-container") is not found in browsers that support template tags. If I search for:

$("#some-id")

I get this back:

<template id=​"some-id">​
  #document-fragment
    <div id="content-container">
      <span>{{some_string}}</span>
    <div>
</template>​

None of this surprises me. What I need to know how to do is to clone the contents of the document-fragment and have a fresh node I can then stick into the DOM where I want it.

I have found examples of how to do this w/o jQuery but much of the code around this stuff is already using jQuery and I need to know how to use jQuery to do this.

My first thought was to get the html and then use it to create a new node:

stuff = $("#some-id").html()
new_node = $(stuff)

This results in the following errors:

Error: Syntax error, unrecognized expression: <the html string>

I don't know if the error is caused by the mustache syntax or not. I figure there has to be a jQuery solution to this behavior somewhere but when I search with Google I get craploads of hits for jQuery Templates, which are different.

Does anyone have thoughts, answers or pointers to sites/pages that will help me through this? I'm trying to avoid cobbling together something hackish.

EDIT: I ended up finding this solution (I'm still testing it to make sure it IS a solution but it looks promising);

template = $("#some-id")
content = template.html()
new_div = $("<div></div>")
new_div.html(content)

I end up with that containing div that I didn't really need previously but I can live with that. But this kind of feels kludgy. Does anyone have a better approach to this? The upside is that it will still work in browsers that haven't adapted the template tag behavior fully yet.

thanks!

Answer 1

Try:

var myTemplate = $("#some-id").html().trim();
var myTemplateClone = $(myTemplate);