web-dev-qa-db-ja.com

JavaScriptオブジェクトのsrcとidを使用して、JQueryで新しいimgタグを作成する方法は？

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

JSONレスポンス（オブジェクトに変換）に画像srcとidがあり、したがってresponseObject.imgurlとresponseObject.imgidに正しい値があります。次に、それを使用して画像を作成し、追加しますdiv（それを<div id="imagediv">と呼びます。<img src="dynamic" id="dynamic">を動的に構築することに少しこだわっています-私が見た例のほとんどは、既存の画像のsrcを置き換えることを含みますが、私はしません。既存の画像があります。

javascriptjqueryimage
85
Peter

JQueryでは、以下に示すように、コンストラクターにHTML文字列を渡すことで新しい要素を作成できます。

var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
img.attr('src', responseObject.imgurl);
img.appendTo('#imagediv');
133
Rob W
var img = $('<img />', { 
  id: 'Myid',
  src: 'MySrc.gif',
  alt: 'MyAlt'
});
img.appendTo($('#YourDiv'));
82
Frenchi In LA

プロパティを jQueryコンストラクター に渡すことで、.attrを完全に回避することで、いくつかのバイトを節約できます。

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

IE 8で同じ機能が必要な人のために、これが私が問題を解決した方法です：

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

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

IE8でコンストラクターでオブジェクトを使用することを強制できませんでした。

2
Vedran Maricevic.