I have this format

<td class="value">
<input type="text" size="30" name="application[name]" id="application_name" data-validate="true" class="name">
</td>

and with jquery i need the final result to be this

<td class="value">
<div class="field_with_errors">
    <input type="text" size="30" name="application[name]" id="application_name" data-validate="true" class="name">
  <label style="color: rgb(204, 0, 0);" class="message" for="application_name">Required</label>
</div>
</td>

As you can see i have a wrapping div....i dont think i can achieve this with prepend. Here is my jquery so far and as you can see i have the input

 var form = $(".applications_form");
 var pany_name = form.find(".name"); 

I have this format

<td class="value">
<input type="text" size="30" name="application[name]" id="application_name" data-validate="true" class="name">
</td>

and with jquery i need the final result to be this

<td class="value">
<div class="field_with_errors">
    <input type="text" size="30" name="application[name]" id="application_name" data-validate="true" class="name">
  <label style="color: rgb(204, 0, 0);" class="message" for="application_name">Required</label>
</div>
</td>

As you can see i have a wrapping div....i dont think i can achieve this with prepend. Here is my jquery so far and as you can see i have the input

 var form = $(".applications_form");
 var pany_name = form.find(".name"); 

• javascript
• jquery

• Check api.jquery./wrap – Ioannis Karadimas Commented Mar 6, 2012 at 16:09

4 Answers 4

Have a look at jQuery.wrap()

http://api.jquery./wrap/

$("#application_name").wrap("<div class=\"field_with_errors\"></div>");
$("#application_name .field_with_errors").append("<label style=\"color: rgb(204, 0, 0);\" class=\"message\" for=\"application_name\">Required</label>");

The first line wraps the input with the div and the 2nd line appends the label.

There is a wrap function for that.

Use the .wrapAll() function, like this:

$('td.value').children().wrapAll('<div/>');

Edit: My mistake, I thought the <label> was in the existing HTML, when it seems to be added (though there's no mention of that!). If the <input> is indeed the only existing element, you can indeed use .wrap(), then use .append() to add the <label> element afterwards.

Possibly something like this:

var pany_name = $('#application_name'); // you have a unique ID, may as well make use of it!
pany_name.wrap('<div/>').parent().append('<label ...>');

try this

var $form = $(".applications_form");
 var $pany_name = $form.find(".name"); 
 $pany_name.wrap('<div class="field_with_errors" />');