Jquery Selector after clone and appendTo

Question

I have cloning and doing appendTo to an empty area on the page. Once the new item is on the DOM, I need to do some manipulation to the newly added item.

Here is the crazy > long jquery selector string I have.

$("#listParticipat.jsParticipantRepeat ").clone().appendTo(".jsParticipantPlaceHolder").attr('recid', custIDNum).removeClass("jsParticipantRepeat" ).removeAttr( "id" );

What I would like to do is to the appendTo then store the newly added item in a VAR and then do other tasks. How can I grab the newly added item with something like:

var newItem = $("#listParticipat.jsParticipantRepeat ").clone().appendTo(".jsParticipantPlaceHolder"); //--does not work

thanks.

Answer 1

You should clone, manipulate, then append.

// clone
var elem = $("#listParticipat.jsParticipantRepeat ").clone();

// your manipulation code here
$(elem).attr('recid', custIDNum);
$(elem).removeClass("jsParticipantRepeat");
$(elem).removeAttr( "id" );

// then append
$(".jsParticipantPlaceHolder").append(elem);

Answer 2

I don't know what is your problem, because your code simply works

the only thing worth to mention here is that appendTo can return multiple objects. It will clone your object for every matching object

http://jsfiddle.net/FBUSp/