Как создать новый тег img с помощью JQuery с src и id из объекта JavaScript?

87

Я понимаю JQuery в основном смысле, но определенно новичок в нем и подозреваю, что это очень просто.

У меня есть src и id изображения в ответе JSON (преобразованном в объект) и, следовательно, правильные значения в responseObject.imgurl и responseObject.imgid, и теперь я хотел бы создать изображение с ним и добавить его в div (давайте назовем его <div id="imagediv">. Я немного застрял в динамическом построении <img src="dynamic" id="dynamic">- большинство примеров, которые я видел, включают замену src в существующем изображении, но у меня нет существующего изображения.

javascript jquery image Питер
источник

Ответы:

138

В jQuery новый элемент можно создать, передав строку HTML в конструктор, как показано ниже:

var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
img.attr('src', responseObject.imgurl);
img.appendTo('#imagediv');
Роб В
источник
@ a7omiton Просмотреть исходный код через контекстное меню или через инспектор? Контекстное меню (или Ctrl + U) показывает данные, полученные от сервера, без изменений, сделанных JavaScript. Используйте инспектор DOM, чтобы просмотреть активный HTML-код документа с текущими изменениями.
Rob W
К сожалению, я удалил комментарий: /, теперь он отображается в инструментах разработчика, страница
зависала
Однако вы правы, что изображения не отображаются на исходной странице (ctrl + u)
a7omiton 01
@ a7omiton Вы можете отключить 404 предупреждения о jquery.min.map, щелкнув значок шестеренки в правом нижнем углу и отключив параметр «Включить исходные карты».
Rob W
Да, я просто смотрел на решение paul_irish ( stackoverflow.com/questions/18365315/… ). Спасибо за это :)
a7omiton 01
85 
var img = $('<img />', { 
  id: 'Myid',
  src: 'MySrc.gif',
  alt: 'MyAlt'
});
img.appendTo($('#YourDiv'));
Frenchi в Лос-Анджелесе
источник
17

Вы сэкономите несколько байтов, .attrполностью исключив их, передав свойства конструктору jQuery :

var img = $('<img />',
             { id: 'Myid',
               src: 'MySrc.gif', 
               width: 300
             })
              .appendTo($('#YourDiv'));
ErickBest
источник
2

Для тех, кому нужна такая же функция в IE 8, я решил проблему следующим образом:

  var myImage = $('<img/>');

               myImage.attr('width', 300);
               myImage.attr('height', 300);
               myImage.attr('class', "groupMediaPhoto");
               myImage.attr('src', photoUrl);

Я не мог заставить IE8 использовать объект в конструкторе.

Wexoni
источник