title: jquery insert new element into table cell without erasing other elements
body: <p>A table contains several rows, each with four cells.</p>
  
  <p>In a cell with <code>id=tdJane</code>, I already have two input elements:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td id="tdBob"&gt;
              &lt;input type="hidden" id="hida" value="some stuff"&gt;
              &lt;input type="hidden" id="hidb" value="other stuff"&gt;
          &lt;td&gt;
          &lt;td id="tdJane"&gt;
              &lt;input type="hidden" id="hid1" value="some text"&gt;
              &lt;input type="hidden" id="hid2" value="other text"&gt;
          &lt;td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Into cell <code>#tdJane</code>, I wish to insert a new hidden input field below <code>#hid2</code></p>
  
  <p>I tried this: </p>
  
  <pre><code>$('#tdJane').html('&lt;input type="hidden" id="hid3" value="newest text"&gt;') 
  </code></pre>
  
  <p>but that overwrites the existing contents of the cell.</p>
  
  <p>How can I do it?</p>