How to create a new img tag using jQuery, with src and id from a JavaScript object?

Question

I understand jQuery in the main sense, but I'm definitely new to this, and I suspect it is very easy.

I have an src image and image id in a JSON response (converted to an object) and therefore the correct values ​​in responseObject.imgurl and responseObject.imgid, and now I would like to create an image with it and add it to the div (let's call it <div id="imagediv"> ). I am a little fixated on dynamic construction <img src="dynamic" id="dynamic"> . Most examples I've seen include replacing src with an existing image, but I don't have an existing image.

Answer 1

In jQuery, a new element can be created by passing an HTML string to the constructor, as shown below:

 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

You save a few bytes while avoiding .attr by passing properties to the jQuery constructor:

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

Answer 4

For those who need the same function in IE 8, I solved this problem:

  var myImage = $('<img/>'); myImage.attr('width', 300); myImage.attr('height', 300); myImage.attr('class', "groupMediaPhoto"); myImage.attr('src', photoUrl); 

I could not get IE8 to use the object in the constructor.