jQuery appendTo does not work under $.post

Question

// plays a card into table.
// this code works. rendered card is appending into the table.
    var playCard = function(card){
        var renderedCard = renderCard(card);
        $('#'+renderedCard.id).appendTo('#flop');

// but this one does not work.
var playCom = function(){
        $.post('/api/comPlay', function(data){
            var renderedCard = renderCard(data.card);
            $('#'+renderedCard.id).appendTo('#flop');
        });
    };

I check the returned value from $.post. data.card gives the correct value. I create a div html with my renderCard function. That function works correctly as you see. But under $.post not.

I am stuck. Is there something special that i must know about $.post?

Thank you.

update :

var renderCard = function(card){
        var create = document.createElement('div');
        create.className = 'cardBig';
        create.id = card;
        return create;
    };

Answer 1

You don't need to "find" your newly-created DOM element.

$(renderedCard).appendTo('#flop');

should do it.

Also, since you're using jQuery anyway:

$('#flop').append($('<div/>', {
  className: 'cardBig',
  id: data.card
}));

will save you the extra function.

Answer 2

In renderCard() method you are just creating a new html element but it is not rendered to the dom.

So your element lookup $('#'+renderedCard.id) will not work

$(renderedCard).appendTo('#flop');

Answer 3

have you tried selecting the id element first, like so:

 $(renderedCard).appendTo( $('#flop')[0] )