title: Display formatted raw html with jquery
body: <p>I have a place where I am trying to show code in a text area.  I have dumbed down the example but basically user can input some fields, click a button, and the code snippet displays in a text area below for them to edit if they want and then copy.</p>
  
  <p>I finally got it working to display the actual code snippet.  But now I can't seem to find a way to format it so that it is indented and looks nice.</p>
  
  <pre><code>var mySnippet =
  "&lt;div id=\"myOuterDiv\"&gt;"
      + "&lt;div id=\"myInnerDiv\"&gt;"
      + "&lt;/div&gt;"
      + "&lt;/div&gt;";
  $('#mySnippetArea').text(mySnippet);
  </code></pre>
  
  <p>Which displays in my text area like so.</p>
  
  <pre><code>&lt;div id="myOuterDiv"&gt;&lt;div id="myInnerDiv"&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Where as I would like to see it as:</p>
  
  <pre><code>    &lt;div id="myOuterDiv"&gt;
          &lt;div id="myInnerDiv"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I'd really like to avoid any 3rd party plugins as its for work an a pain to get approval.  It's just 4 small snippets I need to format.</p>
  
  <p><strong>UPDATE</strong>
  This appears to work as I need.</p>
  
  <pre><code>var mySnippet =
          "&lt;div id=\"myOuterDiv\"&gt;\r"
              + "    &lt;div id=\"myInnerDiv\"&gt;\r"
              + "    &lt;/div&gt;\r"
              + "&lt;/div&gt;\r";
  </code></pre>
  
  <p>Output:</p>
  
  <pre><code>&lt;div id="myOuterDiv"&gt;
      &lt;div id="myInnerDiv"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>