将图像添加到跨度

Question

我正在创建一个 black jack 游戏，我试图让花色出现在所抽牌的旁边。然而花色只显示在最后一张抽出的牌上，但我希望它在每张抽出的牌后显示。

 const drawCard = () => {
    getCardValue() //returns value from ace-k
    getCardSuit() //return heart, spade etc. and sets the corresponding src to img
    let cardSpan = document.createElement('span');
    cardSpan.innerHTML = ` ${cardNumber} ${cardSuit} `
    cardSpan.appendChild(img)
    playerHand.append(cardSpan)
}

（我正在使用辅助函数来获取卡号和卡组）。上面的代码为每张卡片创建了一个新的跨度，但就像我说的只有最后一张卡片附加了图像。当我 console.log 它在开发工具中时，我得到了这个

<span>3 clubs</span>
<span>
  5 Hearts
  <img src... etc>
</span>

有人知道我怎样才能让它出现在每张卡片旁边吗？谢谢。

Answer 1

听起来你只有一张图像，它已经附加到其他地方，所以它移动到另一个跨度。怎么样：

const image = document.createElement('image')
image.src = ???
cardSpan.appendChild(image)

将图像添加到跨度

adding images to a span

html

javascript

append