title: Copy contents of a div inlcuding html tags into a hidden input
body: <p>hopefully simple question,</p>
  
  <p>What I want to do is to grab the contents of my div including the html tags of any child elements and insert it into a hidden input in a form <strong>every time I press a key in another input field</strong></p>
  
  <p>e.g. if my div is:</p>
  
  <pre><code>&lt;div&gt;&lt;p&gt;Hello&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I want to copy over:</p>
  
  <pre><code>&lt;p&gt;Hello&lt;/p&gt;
  </code></pre>
  
  <p>As a string</p>
  
  <p>I tried:</p>
  
  <pre><code>$(document).ready(function(){
      $('#textarea').keyup(function() {
          $('#hidden-input').html($('#div'));
      });
  });
  </code></pre>
  
  <p>The only problem is the contents of my hidden-input contains the div and the contends of the div, e.g. it looks like this:</p>
  
  <pre><code>&lt;input type="hidden" id="hidden-input" name="foo" value="bar"&gt;
      &lt;div&gt; (DIV CONTENTS) &lt;/div&gt;
  &lt;/input&gt;
  </code></pre>
  
  <p>I only want (DIV CONTENTS) from the above, no div. Like this:</p>
  
  <pre><code>&lt;input type="hidden" id="hidden-input" name="foo" value="bar"&gt;
      (DIV CONTENTS)
  &lt;/input&gt; 
  </code></pre>