CODEWITHSUNDEEP
jquery
Omar Abid
Omar Abid

Reputation: 15976

About the Jquery Append Function

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??

Upvotes: 0

Views: 193

Answers (3)

meouw
meouw

Reputation: 42140

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

Upvotes: 0

cobbal
cobbal

Reputation: 70733

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

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

Upvotes: 3

Darmen Amanbay
Darmen Amanbay

Reputation: 4881

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>')

Upvotes: 1

Related Questions