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

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

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

Ответы

Ответ 1

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

var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
img.attr('src', responseObject.imgurl);
img.appendTo('#imagediv');

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

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

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

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