Як створити новий тег 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

На жаль, я видалив коментар: /, він зараз відображається в інструментах розробника, сторінка висіла через випуск jquery map 404

— a7omiton

Однак ви маєте рацію, що зображення не відображаються на вихідній сторінці (ctrl + u)

— a7omiton

@ a7omiton Ви можете вимкнути 404 попередження щодо jquery.min.map, натиснувши на значок шестерні в нижньому правому куті та відключивши опцію "Увімкнути вихідні карти".

— Rob W

Так, я просто дивлюся на рішення по paul_irish ( stackoverflow.com/questions/18365315 / ... ). Дякую за це :)

— a7omiton

85

var img = $('<img />', { 
  id: 'Myid',
  src: 'MySrc.gif',
  alt: 'MyAlt'
});
img.appendTo($('#YourDiv'));

— Франчі в Лос-Анджелесі
джерело

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 використовувати об'єкт у конструкторі.

— Вексоні
джерело