Append html string as a table row (<tr>) via javascript-jquery

Question

I'm trying to append an HTML string to

var field = '<input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value="">'
var jfield = $(field);
$('#featureContainer').append(jfield);

When the button is clicked it will crete a input field, but if I click again it creates the input in the same row. How can I make a new row with the input in it?

The following is my HTML code

<tr>
    <td id="featureContainer"></td>
</tr>

If I click the button for the second time it creates it in the same row. I want it to create it in new row.

Answer 1

As we don't know wether trs are wrapped inside table or tbody, .... We have to look for the closest tr and then get its parent then append a new row to that parent.

So, you should replace this:

$('#featureContainer').append(jfield);

with:

$('#featureContainer').closest('tr').parent().append('<tr><td>' + field + '</td></tr>');

NOTE: that inside field you have a static ID which will be on all the inputs you spawn which will be wrong since IDs are unique. So you may want to assign diferent IDs for diferent inputs.

Answer 2

You can just add the html code into field variable, like below:

var field = "<tr><td id="featureContainer"><input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value=""></td>
</tr>"
var jfield = $(field);

Assuming there is a button with id = 'add' and a table with id='data', then you can add this after above code:

$('#add').click(function(){
    $('#data').append(jfield);
});