How can I create an embeded HTML template using <script type="text/template"> using jquery

Question

I would like to create HTML templates that can be called form jQuery using script tags and then be able to show the HTML using jQuery.

<script type="text/template">
   <div id="new-post">
     <form>
       <label>Post Title</label>
       <input type="text" id="post-title"/>
       <input type="submit" value="Save"/>
     </form>
   </div>
</script>

I have found other post on stackoverflow.com, but none are what I'm looking for. Any advice on how to get this working would be appreciated.

Answer 1

What you're trying should work OK. If you have something like this:

<script type="text/html" id="post-template">
  <div id="new-post">
    <form>
      <label>Post Title</label>
      <input type="text" id="post-title"/>
      <input type="submit" value="Save"/>
    </form>
  </div>
</script>

You should be able to do this to extract the template:

var template = $('#post-template').html();

Better yet, look into using jQuery templates. See this documentation for a good overview of how they work.