About the Jquery Append Function

Question

Hi, Let's assume you have a table and the following Jquery code

var rows = $('#ttable').find('tbody > tr').get();
$('#ttable tbody').append(rows[1]);

Right the rows object gets all the "tr". The second line, will append row[1] to the table body, so you should get it in the end of the table.

It works fine, but the original row disappear. WHY? This mean, the row don't duplicate, it just moves. WHY? and How to fix that??

Answer 1

Maybe because rows[1] refers to an object already inserted into at table and registered in DOM. Try to clone that object and add as a new one.

Or you can try smth like this:

$('#ttable tr:first').before('<tr>...</tr>')

Answer 2

if you clone it first it will do what you want:

var rows = $('#ttable').find('tbody > tr');
$('#ttable tbody').append(rows.eq(1).clone());

Answer 3

jQuery's append function uses Node.appendChild() under the hood and so behaves the same way

from MDC

Adds a node to the end of the list of children of a specified parent node. If the node already exists it is removed from current parent node, then added to new parent node.

so like cobbal says, you have to clone the row and append the clone