Add table row in jQuery

Question

What is the best method in jQuery to add an additional row to a table as the last row?

Is this acceptable?

$(\'#myTable\').append(\'

        

Answer 1

Neil's answer is by far the best one. However things get messy really fast. My suggestion would be to use variables to store elements and append them to the DOM hierarchy.

HTML

JAVASCRIPT

// Reference to the table body
var body = $("#tableID").find('tbody');

// Create a new row element
var row = $('');

// Create a new column element
var column = $('');

// Create a new image element
var image = $('');
image.attr('src', 'img.png');
image.text('Image cell');

// Append the image to the column element
column.append(image);
// Append the column to the row element
row.append(column);
// Append the row to the table body
body.append(row);