CODEWITHSUNDEEP
javascriptjquery
Ashley Davies
Ashley Davies

Reputation: 1903

Empty and append expanding height of element

I'm running this code:

$('#storeTable').empty();

$('#storeTable').append("<tr>");
$('#storeTable').append("<td>");
$('#storeTable').append(returnData["1"]["ID"]);
$('#storeTable').append("</td>");
$('#storeTable').append("</tr>");

However if I run it multiple times in one page load, the 'storeTable' element gets taller and taller with every run. Am I missing something obvious, is this a gotcha of jQuery/JavaScript, is it the fault of my browser (Chrome), or am I doing something wrong?

The code obviously needs refining, I'm just trying to get a bare-bones implementation of a dynamic section of a page.

If you'd like any other details, please ask, rather than just downvoting without a comment.

storeTable is, of course, a table, too.

Upvotes: 0

Views: 100

Answers (2)

jfriend00
jfriend00

Reputation: 707826

You can't use .append() to append partial pieces of HTML. .append() only appends whole formed objects and when it appends them it appends them as the last child of the target object.

To add to that, some browsers are picking about how you can or cannot create/remove content in tables.

Assuming #storeTable is the <table> tag, you could assign .html() to create a whole new table all at once:

$("#storeTable").html("<tr><td>" + returnData["1"]["ID"] + "</td></tr>");

Working demo: http://jsfiddle.net/jfriend00/5BVdX/

Upvotes: 1

Edward Ruchevits
Edward Ruchevits

Reputation: 6696

$('#storeTable').empty();

// Will create three rows, one after another
$('#storeTable').append("<tr><td>123</td></tr>");
$('#storeTable').append("<tr><td>456</td></tr>");
$('#storeTable').append("<tr><td>789</td></tr>");

// Will create three rows, each next replaces previous
$('#storeTable').html("<tr><td>123</td></tr>");
$('#storeTable').html("<tr><td>456</td></tr>");
$('#storeTable').html("<tr><td>789</td></tr>");

Upvotes: 1

Related Questions