jQuery insertbefore

I have the following:

<开发者_JAVA技巧;table id="StateNames">
<tr>
<td><input name="StateName"></td>
</tr>
<tr><td>Wyoming</td></tr>
<tr><td>Wisconsin</td></tr>
<tr><td>West Virginia</td></tr>
</table>

I'd like to

$('input').change(function() {
   var StateName = $(this).val();
   insert <tr><td>StateName</td></tr> before Wyoming

---

I assume you want to add the row after the row where the input element is:

$('input').change(function() {
    var StateName = $(this).val();
    $(this).closest('tr').after('<tr><td>'+StateName+'</td></tr>');
});

If you explicitly need to insert it before the row that has Wyoming in it, you'd better identify that row somehow – an ID tag would be appropriate:

<tr id="wyoming"><td>Wyoming</td></tr>
<tr id="wisconsin"><td>Wisconsin</td></tr>
<tr id="west-wirginia"><td>West Virginia</td></tr>

 

$('input').change(function() {
    var StateName = $(this).val();
    // Insert before Wyoming:
    $('#wyoming').before('<tr><td>'+StateName+'</td></tr>');
});

You can also use the :contains() pseudo class if you don't want to name your rows (it would be faster that way):

$("tr:contains('Wyoming')").before('<tr><td>'+StateName+'</td></tr>');

---

Like this:

var newElem = $('<tr></tr>').append($('<td></td>').text(StateName));
$(this).closest('tr').after(newElem);

Or:

$('tr:contains(Wyoming)').before(newElem);