title: how to wrap and unwrap html control with a div dynamically using jquery
body: <p>i am generating html control dynamically and now i want to wrap the html content in a div dynamically using jquery.</p>
  
  <p>Example: dynamically generated control is   </p>
  
  <pre><code>&lt;input type='text' value='default' id='text1'/&gt;
  </code></pre>
  
  <p>should be wrapped as</p>
  
  <pre><code>&lt;div class='outerdiv'&gt;
    &lt;input type='text' value='default' id='text1'/&gt;
    &lt;span class='handle'&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>i tried with</p>
  
  <pre><code>$('#text1').wrap("&lt;div class='outerdiv'&gt;&lt;span class='handle'&gt;&lt;/span&gt;&lt;/div&gt;");
  </code></pre>
  
  <p>and for unwrap i use </p>
  
  <pre><code>$('#text1').unwrap();
  </code></pre>
  
  <p>but i am unable to get what i expected.</p>