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

Question

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.

score 141 · Accepted Answer · answered Nov 04 '11 at 18:03

141

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');

answered Nov 04 '11 at 18:03

Rob W

341,306
83
791
678

@a7omiton View source via contextmenu or via the inspector? The contextmenu (or Ctrl + U) shows the data received from the server without the changes made by JavaScript. Use the DOM inspector to see the document's active HTML with live changes. – Rob W Oct 01 '13 at 15:16
Oops sorry I deleted the comment :/, it does show up in the dev tools now, the page was hanging because of the jquery map 404 issue – a7omiton Oct 01 '13 at 15:18
You are right however that the images don't show up on the source page (ctrl + u) – a7omiton Oct 01 '13 at 15:21
@a7omiton You can disable the 404 warnings about jquery.min.map by clicking on the gears icon in the bottom-right corner and disabling the "Enable source maps" option. – Rob W Oct 01 '13 at 15:23
Yes, I was just looking at the solution by paul_irish (http://stackoverflow.com/questions/18365315/jquerys-jquery-1-10-2-min-map-is-triggering-a-404-not-found). Thanks for that :) – a7omiton Oct 01 '13 at 15:24
Remember - if the `attr` is `undefined` then the attribute is not going to show up in the created element – Devaroop Aug 29 '19 at 10:21

score 91 · Answer 2 · edited Apr 09 '15 at 23:21

91

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

edited Apr 09 '15 at 23:21

Manuel Araoz

15,962
24
71
95

answered Nov 04 '11 at 18:11

Frenchi In LA

3,139
3
25
41

score 18 · Answer 3 · edited Nov 04 '15 at 06:37

18

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'));

edited Nov 04 '15 at 06:37

Community

1
1

answered Jun 08 '13 at 15:09

ErickBest

4,586
5
31
43

score 2 · Answer 4 · answered May 06 '14 at 11:04

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.

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

4 Answers4

Linked