title: How to preserve whitespace in dynamically added javascript DOM element without using CSS?
body: <p>When adding in text with small whitespace appended to it for alignment purposes the whitespace is trimmed off (the whitespace is added in c# so by the time it gets to front end Javascript it cannot be edited - <em><strong>it would be nice to just use some CSS to do this but it is not an option</strong></em>).</p>
  <p>Here is what I tried so far:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var zlp = document.getElementById("testDiv")
  zlp.innerHTML = "hello                hello"
  var zzz = document.createTextNode("hello                hello")
  zlp.appendChild(zzz)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="testDiv"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Both of which produce <code>hello hello</code>.</p>