Jquery attr src does not include img tag

Question

var $card = $("<li>");
var imgName1 = 'images/' + rankOut + suitOut + '.png';
//assign element an image attribute
$card.attr("src", imgName1);

So I'm trying to add an image to my .card with attr.("src"...) however when the webpage loads, it is missing the <img> tag

It renders as <li src="images/ace_of_spades.png"></li> without the img tag. I asked my teacher and it has to look like this

<ul><img src="(image location)"></ul>

how do i add the <img> ?

Answer 1

试试这个：

var $card = $('<li><img src="' + 'images/' + rankOut + suitOut + '.png' + '"></li>');

Answer 2

You are currently setting the src attribute of an li element which of course doesn't create an img element. For creating an img element using jQuery you can code:

var $img = $('<img/>', {
   'src': 'images/' + rankOut + suitOut + '.png'
});
// Appending the element
$card.append($img);