Adding image to a div using JQuery

Question

I'm trying to create a poker web app using an poker library ( http://tairraos.github.io/Poker.JS/ )

One of the methods to render a card image is using this function:

getCardImage: function(size, suit, point) {
            var image = document.createElement('img');
            image.src = this.getCardData(size, suit, point);
            return image;
},

It creates an image using canvas and places inside an img tag. I've been trying to place it inside a div, like:

$('#flop').append(Poker.getCardImage(60, 'hearts', 'j'));

but to no avail. The only way it renders normally is using:

document.body.appendChild(Poker.getCardImage(100, 'h', 'Q'));

I really run off of ideas of how to pull this out. I've tried many JQuery methods and nothing worked. I see on the network tab of chrome that the image is created using a base64, but when I try to place it inside a div, nothing appears. Only if appends to the end of the body. Can someone lend me a help here?

tnx

Answer 1

I think you should just have to change your getCardImage function to return a jQuery Element instead of an HTML element. Try this:

getCardImage: function(size, suit, point) {
    var image = '<img src="' + this.getCardData(size, suit, point) + '" />';
    return $(image);
}

Then your jQuery append should work:

$('#flop').append(Poker.getCardImage(60, 'hearts', 'j'));