Question

I have the following HTML:

<div id="modal" ><div class="modal-window">
<ul class="action-tabs right">
<li><a href="#" title="Close window">
<img src="/Content/images/icons/fugue/cross-circle.png" width="16" height="16"></a></li>
</ul>
<div class="block-content"><h1>xx</h1>
<div class="modal-content>
...
</div>
</div>
</div>

I can’t change the way this is coded but I need there to be a form element starting after the h1 heading and finishing after the end div of the class “modal-content”. Note there’s only one “block-content” and “modal-content”.

Is there a way using jQuery that I could insert in a form tag as below:

<div id="modal" ><div class="modal-window">
<ul class="action-tabs right">
<li><a href="#" title="Close window">
<img src="/Content/images/icons/fugue/cross-circle.png" width="16" height="16"></a></li>
</ul>
<div class="block-content"><h1>xx</h1>
<form id="xx">
<div class="modal-content>
...
</div>
</form>
</div>
</div>

Answer 1

Try this ..

$(".modal-content").wrap("<form id='xx'>")

Refer http://api.jquery.com/wrap/ for more options