title: Issues accessing DOM innerHTML with JavaScript
body: <p>I am using the Summernote WYSIWYG editor to provide users with functionality to edit HTML templates, and store changes to a personalised area.  To do this I need to POST a set of text fields, along with the edited HTML, to the backend.</p>
  
  <p>All is working as expected, except that the HTML that gets POSTed from the editable DIV, doesn't POST the updated DOM i.e. it's the original HTML template, without the edits.</p>
  
  <p>If I use the browser dev tools console, I can use 'document.documentElement.outerHTML' to see the correctly updated DOM, but when I set a variable to get the outerHTML element by ID, I still only POST the original markup.</p>
  
  <p>The variable within the script is as follows (based upon other StackOverflow answers):</p>
  
  <pre><code>var content = $('#template_text')[0].outerHTML;
  </code></pre>
  
  <p>As mentioned, this allows me to POST the content of the DIV, but doesn't POST the updates that a user makes to the template.</p>
  
  <p>I have tried using <code>innerHTML, outerHTML, html()</code>, but essentially end up with the same result.  If I use <code>document.documentElement.outerHTML</code> within the variable, this POSTs the updated values, but sends the whole document, rather than just the DIV (and I only want the DIV).</p>
  
  <p>Any help would be greatly appreciated.</p>