如何使用JQuery創建一個新的img標籤，使用JavaScript對象的src和id？

我理解基本意義上的JQuery，但絕對是新的，並且懷疑這很容易。如何使用JQuery創建一個新的img標籤，使用JavaScript對象的src和id？

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

來源

2011-11-04 Peter

113

在jQuery中，新的元素可以通過使HTML字符串的構造函數創建，如下所示：

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

來源

2011-11-04 18:03:00

@ a7omiton通過contextmenu或通過檢查員查看源代碼？ contextmenu（或Ctrl + U）顯示從服務器接收的數據，而不用JavaScript所做的更改。使用DOM檢查器通過實時更改查看文檔的活動HTML。 –

哎呀對不起，我刪除了評論：/，它確實顯示在開發工具現在，頁面掛了因爲jQuery地圖404問題 – a7omiton

你是對的，但圖像不顯示在源頁面上（Ctrl鍵+ u） – a7omiton

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

來源

2011-11-04 18:11:27

您節省避免.attr乾脆一些字節通過將屬性的jQuery constructor：

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

來源

2013-06-08 15:09:07 ErickBest

這不適用於Internet Explorer 8 –

你嘗試了什麼沒有奏效？...我可以看到你的代碼嗎？ – ErickBest

對於那些誰需要在IE 8相同的特徵，這是我解決了這個問題：

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

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

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

來源

2014-05-06 11:04:07

如何使用JQuery創建一個新的img標籤，使用JavaScript對象的src和id？

回答

相關問題