title: What's a clean and efficient way to generate and append HTML with JavaScript or JQuery?
body: <p>I was going to ask <a href="https://stackoverflow.com/questions/3175241/performance-wise-request-json-and-render-in-js-or-request-the-entire-html">this question</a> (until I found it was already asked) and now have the answer to that question:</p>
  
  <blockquote>
    <p>It's better to request JSON from a PHP script and then wrap the results in HTML with JavaScript.</p>
  </blockquote>
  
  <p>Now I have the unfortunate task of generating HTML with JavaScript to append to my document and am not sure how best to approach this.</p>
  
  <p>With PHP I could simply store a HTML file and then use <code>file_get_contents()</code> and regex to replace some tokens with the relevant information, however I don't think it's that easy with JavaScript.</p>
  
  <p>Some methods I have thought of:</p>
  
  <ol>
  <li><p>The repulsive approach. Generate a massive ugly string and then append that:</p>
  
  <pre><code>var html = '&lt;div class="comment"&gt;' +
      '&lt;strong&gt;' + author + '&lt;/strong&gt;: ' +
      '&lt;p&gt;' + content + '&lt;/p&gt;' +
  '&lt;/div&gt;';
  
  $("#comments").append(html);
  </code></pre></li>
  <li><p>Store the string somewhere and then use regex on that, which might look like this:</p>
  
  <pre><code>var commentHTML = '&lt;div class="cmt"&gt;&lt;strong&gt;{auth}&lt;/strong&gt;: {cmt}&lt;/div&gt;';
  </code></pre></li>
  </ol>
  
  <p>Is there a library/plugin that deals with this better maybe? Riddling my JavaScript with chunks of HTML stored in strings is something I'd <em>really</em> like to avoid. Maybe there is a similar method to what I mentioned I do using PHP? Can JavaScript read HTML files and store the content as a string?</p>