title: best way to inject html using javascript
body: <p>I'm hoping that this isn't too subjective. I feel there is a definitive answer so here goes.</p>
  
  <p>I want to create this html on the fly using JS (no libraries):</p>
  
  <pre><code>&lt;a href="#" id="playButton"&gt;Play&lt;/a&gt;
  &lt;a href="javascript: void(0)" id="muteUnmute"&gt;Mute&lt;/a&gt;
  &lt;div id="progressBarOuter"&gt; 
    &lt;div id="bytesLoaded"&gt;&lt;/div&gt;
      &lt;div id="progressBar"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="currentTime"&gt;0:00&lt;/div&gt;
  &lt;div id="totalTime"&gt;0:00&lt;/div&gt;
  </code></pre>
  
  <p>using javascript. I know I can do this using createElement etc but it seems extremely long winded to do this for each element. Can anyone suggest a way to do this with more brevity.</p>
  
  <p>I do not have access to a library in this project....so no jquery etc.</p>