Добавление изображений в <div> с помощью jQuery

Это игра «Собиратель кристаллов», в которой создаются четыре кристалла («дивы») со случайными числами внутри них, которые пользователь щелкает, чтобы добавить числа к случайному числу, сгенерированному компьютером, чтобы оно соответствовало случайному числу компьютера. Все работает, но мне трудно добавить изображения кристаллов, которые мне нужны, в 4 блока.

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

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

Единственный результат, который мне нужен, - это 4 кристаллических изображения, которые будут отображаться в моих 4 элементах div, созданных для случайных кликов.

вам нужно создать тег img, установить его src на URL-адрес изображения, а затем добавить его к crystals.

— 10.06.2019 20:09

Вы создаете <div>. Вместо этого создайте img: var crystal = $("<img/>");

— 10.06.2019 20:13

Возможный дубликат Добавление элемента img в div с помощью javascript

— 10.06.2019 20:15

Ну, мне нужно 4 <divs> для хранения случайных чисел внутри. По сути, мне нужно 4 <divs> для хранения как случайных чисел, так и изображений.

— 10.06.2019 20:18

javascript jquery

10.06.2019 20:07

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вместо div создайте тег img.

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>

10.06.2019 20:15

Создайте изображение и добавьте в 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);

10.06.2019 20:17

Другие вопросы по теме

Экспортировать html и google диаграммы в pfd без потери стилей css

Группировать элементы и перестраивать список

Разделение текстового поля на 2 отдельных поля

Добавить атрибут html в строку

Количество элементов остается прежним после добавления с помощью Javascript

Как использовать атрибут данных параметров выбора в фильтре jquery?

Неопределенный индекс Jquery Ajax POST

Как я могу получить идентификатор строки в нескольких таблицах с помощью jquery?

HTML и jQuery: как выбрать объект из *.js в *.html

Удалить узел из списка узлов jquery

Добавление изображений в <div> с помощью jQuery

Ответы 2

Другие вопросы по теме

Похожие вопросы