Question

i am generating html control dynamically and now i want to wrap the html content in a div dynamically using jquery.

Example: dynamically generated control is

<input type='text' value='default' id='text1'/>

should be wrapped as

<div class='outerdiv'>
  <input type='text' value='default' id='text1'/>
  <span class='handle'></span>
</div>

i tried with

$('#text1').wrap("<div class='outerdiv'><span class='handle'></span></div>");

and for unwrap i use

$('#text1').unwrap();

but i am unable to get what i expected.

Answer 1

Use .wrap() to enclose it in a div, and then .after() or .append() to add the span.

$('#text1').wrap("<div class='outerdiv'></div>").after("<span class='handle'></span>");

To unwrap and delete, locate and .remove() the span before you unwrap:

$('#text1').next().remove().end().unwrap();