title: How can I correctly store a HTML template within a HTML page?
body: <p>I have some small template strings, which will be rendered through Mustache.js on the same page.I need not create seperate html files for templates.</p>
  
  <p>Options for storing the templates :</p>
  
  <ol>
  <li><p>Storing in javascript variables :  Hackish multiline strings, lots of escaping of quotes.</p></li>
  <li><p>Storing as innerHTML of hidden divs.</p></li>
  </ol>
  
  <p>I tried method#2, but it does not seem to work correctly. </p>
  
  <p>Fiddle:
  <a href="http://jsfiddle.net/RHwnq/2/">http://jsfiddle.net/RHwnq/2/</a></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;div id='templates' class='hide' align=""&gt;
           &lt;div id='tableTemplate'&gt;
              &lt;table class="table"&gt;
                   {{#name_list}}
                    &lt;tr&gt;&lt;td&gt; {{name}} &lt;/td&gt;&lt;/tr&gt;
                  {{/name_list}}
              &lt;/table&gt;
           &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
   var template = $('#tableTemplate').html();
   console.log(template);
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This logs :</p>
  
  <pre><code>{{#name_list}}
    {{name}} 
  {{/name_list}}
  &lt;table class="table"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
  </code></pre>
  
  <p>Instead of :</p>
  
  <pre><code>  &lt;table class="table"&gt;
                       {{#name_list}}
                        &lt;tr&gt;&lt;td&gt; {{name}} &lt;/td&gt;&lt;/tr&gt;
                      {{/name_list}}
    &lt;/table&gt;
  </code></pre>
  
  <p>This might be to due to some markup correction by the browser.
  What are other good tricks to store HTML templates within an HTML page ?</p>