Làm thế nào để tạo một thẻ img mới với JQuery, với src và id từ một đối tượng JavaScript?

Question

Tôi hiểu JQuery theo nghĩa cơ bản nhưng chắc chắn mới với nó, và nghi ngờ điều này là rất dễ dàng.

Tôi đã có hình ảnh src và id của tôi trong một phản hồi JSON (được chuyển đổi thành một đối tượng), và do đó các giá trị chính xác trong responseObject.imgurl và responseObject.imgid, và bây giờ tôi muốn tạo một hình ảnh với nó và thêm nó vào một div (cho phép gọi nó là <div id="imagediv">) Tôi hơi bị kẹt khi tự động xây dựng <img src="dynamic" id="dynamic"> - hầu hết các ví dụ tôi đã thấy liên quan đến việc thay thế src trên một hình ảnh hiện có, nhưng tôi không có một hình ảnh hiện có .

Answer 1

Trong jQuery, một yếu tố mới có thể được tạo ra bằng cách thông qua một chuỗi HTML để các nhà xây dựng, như hình dưới đây:

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

Answer 2

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

Answer 3

Bạn tiết kiệm một số byte bằng cách tránh các .attr hoàn toàn bằng cách thông qua các thuộc tính cho jQuery constructor:

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

Answer 4

Với những ai cần tính năng tương tự trong IE 8, đây là cách tôi giải quyết vấn đề:

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

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

Tôi không thể buộc IE8 sử dụng đối tượng trong hàm tạo.