jQuery add image inside of div tag

Question

I have a div tag

<div id="theDiv">Where is the image?</div>

I would like to add an image tag inside of the div

End result:

<div id="theDiv"><img id="theImg"  src="theImg.png" />Where is the image?</div>

score 325 · Accepted Answer · answered Jun 02 '09 at 18:48

325

Have you tried the following:

$('#theDiv').prepend('<img id="theImg" src="theImg.png" />')

answered Jun 02 '09 at 18:48

Topher Fangio

20,372
15
61
94

11

I can't respond to Jose Basilio above (not enough rep) but append will put it AFTER "Where is the image?". Prepend will put it before. – Topher Fangio Jun 02 '09 at 18:49
5

I was about to upvote you for using prepend, but I noticed that you're missing '#' in your selector... – Ben Koehler Jun 02 '09 at 18:51
1

I jumped the gun with append. Good catch. +1 – Jose Basilio Jun 02 '09 at 18:54
appendTo doesn't work...at least in my code and it wasn't the right one to use after I read it on the jQuery docs page even before posting this thread. – PositiveGuy Jul 30 '10 at 16:28
tried .append() and .html() to add the image tag, but image is not loading though the tag appears with the source properly. Any suggestions over this ? – AnoopGoudar Oct 11 '17 at 11:57
@AnoopGoudar Post a question here on SO with your code and perhaps we can help. It's really hard to debug something when we can't see the code :-) – Topher Fangio Oct 11 '17 at 20:36
@TopherFangio I have added the code and the hack I used to fix the issue I had. Please suggest if it can be done in a better way. But that fix is working for me now. – AnoopGoudar Oct 13 '17 at 06:42

score 61 · Answer 2 · answered Mar 30 '14 at 20:56

61

my 2 cents:

$('#theDiv').prepend($('<img>',{id:'theImg',src:'theImg.png'}))

answered Mar 30 '14 at 20:56

Kuf

17,318
6
67
91

i like this answer cuz of the $('') usage, was looking for it. – user734028 Apr 28 '18 at 06:00
you can also add attributes after the $(' – Scott Jan 27 '20 at 16:18
1

isnt this the correct answer? – bonobo Sep 20 '21 at 07:17

score 27 · Answer 3 · answered Jun 02 '09 at 18:48

27

$("#theDiv").append("<img id='theImg' src='theImg.png'/>");

You need to read the documentation here.

answered Jun 02 '09 at 18:48

jacobangel

6,896
2
34
35

score 11 · Answer 4 · edited Sep 04 '15 at 08:16

11

If we want to change the content of <div> tag whenever the function image()is called, we have to do like this:

Javascript

function image() {
    var img = document.createElement("IMG");
    img.src = "/images/img1.gif";
    $('#image').html(img); 
}

HTML

<div id="image"></div>
<div><a href="javascript:image();">First Image</a></div>

edited Sep 04 '15 at 08:16

Kelly Thomas

440
7
17

answered Sep 19 '14 at 07:08

Manjeet Kumar

127
1
3

1

I suggest you to add some explanation. – Olter Sep 19 '14 at 07:35
1

If we want to change the content of
tag,whenever the function image()is called. we have to do like this/ function image() { var img = document.createElement("IMG"); img.src = "/images/img1.gif"; $('#image').html(img); }

First Image
– Manjeet Kumar Sep 19 '14 at 13:02

score 8 · Answer 5 · edited Dec 23 '21 at 14:30

8

In addition to Manjeet Kumar's post (he didn't have the declaration)

var image = document.createElement("IMG");
image.alt = "Alt information for image";
image.setAttribute('class', 'photo');
image.src="/images/abc.jpg";
$("#TheDiv").html(image);

edited Dec 23 '21 at 14:30

Mohammed Shareef C

3,829
25
35

answered Jun 10 '15 at 12:15

Evan Parsons

1,139
20
31

score 2 · Answer 6 · answered Jul 28 '16 at 10:15

var img;
for (var i = 0; i < jQuery('.MulImage').length; i++) {
                var imgsrc = jQuery('.MulImage')[i];
                var CurrentImgSrc = imgsrc.src;
                img = jQuery('<img class="dynamic" style="width:100%;">');
                img.attr('src', CurrentImgSrc);
                jQuery('.YourDivClass').append(img);

            }

score 0 · Answer 7 · answered May 26 '22 at 22:37

0

this is the best way :

$(selector).prepend()

answered May 26 '22 at 22:37

Mohamedyassine

26
4

jQuery add image inside of div tag

7 Answers7

Linked

Related