JavaScriptオブジェクトのsrcとidを使用して、JQueryで新しいimgタグを作成するにはどうすればよいですか？

87

私は基本的な意味でJQueryを理解していますが、JQueryはまったく新しいものであり、これは非常に簡単だと思います。

JSON応答（オブジェクトに変換された）に画像のsrcとidが含まれているため、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');

— ロブW
ソース

@ a7omitonコンテキストメニューまたはインスペクターを介してソースを表示しますか？コンテキストメニュー（またはCtrl + U）には、JavaScriptによる変更なしでサーバーから受信したデータが表示されます。DOMインスペクターを使用して、ライブ変更を含むドキュメントのアクティブなHTMLを確認します。

— ロブW

コメントを削除して申し訳ありません：/、開発ツールに表示されます

— 。jquery

ただし、画像がソースページに表示されないことは正しいです（ctrl + u）

— a7omiton 2013年

@ a7omiton右下隅にある歯車のアイコンをクリックし、[ソースマップを有効にする]オプションを無効にすることで、jquery.min.mapに関する404警告を無効にできます。

— ロブW

はい、私はpaul_irish（stackoverflow.com/questions/18365315/…）による解決策を見ていました。それをありがとう：）

— a7omiton 2013年

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にコンストラクターでオブジェクトを使用させることができませんでした。

— ウェクソニ
ソース