CODEWITHSUNDEEP
javascriptjqueryimage
Peter
Peter

Reputation: 29857

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

I understand JQuery in the basic sense but am definitely new to it, and suspect this is very easy.

I've got my image src and id in a JSON response (converted to an object), and therefore the correct values in responseObject.imgurl and responseObject.imgid, and now I'd like to create an image with it and append it to a div (lets call it <div id="imagediv">. I'm a bit stuck on dynamically building the <img src="dynamic" id="dynamic"> - most of the examples I've seen involve replacing the src on an existing image, but I don't have an existing image.

Upvotes: 90

Views: 203775

Answers (4)

ErickBest
ErickBest

Reputation: 4692

You save some bytes by avoiding the .attr altogether by passing the properties to the jQuery constructor:

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

Upvotes: 19

Frenchi In LA
Frenchi In LA

Reputation: 3169

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

Upvotes: 93

Amiga500
Amiga500

Reputation: 6131

For those who need the same feature in IE 8, this is how I solved the problem:

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

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

I could not force IE8 to use object in constructor.

Upvotes: 2

Rob W
Rob W

Reputation: 348992

In jQuery, a new element can be created by passing a 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');

Upvotes: 141

Related Questions