如何使用JQuery創建一個新的img標記，以及來自JavaScript對象的src和id？

Question

我從基本的意義上理解JQuery，但我肯定是新手，並懷疑這很容易。

我在JSON響應（轉換為對象）中得到了我的圖像src和id，因此在responseObject.imgurl和responseObject.imgid中得到了正確的值，現在我想用它創建一個圖像並將其附加到一個div（讓我們稱之為<div id="imagediv"> 。我有<div id="imagediv">在動態構建<img src="dynamic" id="dynamic"> - 我見過的大部分例子都涉及到src在現有圖像上，但我沒有現有圖像。

Answer 1

在jQuery中，可以通過將HTML字符串傳遞給構造函數來創建新元素，如下所示：

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

通過將屬性傳遞給jQuery構造函數，可以完全避免使用.attr來節省一些字節：

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

Answer 4

對於那些在IE 8中需要相同功能的人來說，這就是我解決問題的方法：

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

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

我無法強制IE8在構造函數中使用對象。