将图像添加到 <div> 使用jQuery

Question

This is a "Crystals Collector" game which creates four crystals ("divs") with random numbers inside them, which the user clicks to add numbers to a random number the computer has generated, to match the computer's random number. Everything works but I'm having a hard time adding the images of crystals I need into the 4 divs.

var image = "../../assets/images/crystal.jpg"

var crystal = $("<div>");
crystal.attr({
    "class": 'crystal',
    "data-random": randomNum,
    "src": image
});
$(".crystals").append(crystal);

The only result I need is for 4 crystal images to show in my 4 divs created for the random number clicks.

Answer 1

Instead of div create img tag.

 var image = "https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" var crystal = $("<img>"); crystal.attr({ "class": 'crystal', "data-random": 1, "src": image, "height": '100px', "width": '100px' }); $(".crystals").append(crystal); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="crystals"></div> 

Answer 2

Create the image and add to div

 var elem = document.createElement("img"); elem.setAttribute("src", "images/hydrangeas.jpg"); elem.setAttribute("height", "768"); elem.setAttribute("width", "1024"); elem.setAttribute("alt", "Flower"); document.getElementById("placehere").appendChild(elem);