167

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>

7 Answers 7

325

Have you tried the following:

$('#theDiv').prepend('<img id="theImg" src="theImg.png" />')
7
  • 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. Jun 2, 2009 at 18:49
  • 5
    I was about to upvote you for using prepend, but I noticed that you're missing '#' in your selector... Jun 2, 2009 at 18:51
  • 1
    I jumped the gun with append. Good catch. +1 Jun 2, 2009 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. Jul 30, 2010 at 16:28
  • tried .append() and .html() to add the image tag, but image is not loading though the <img> tag appears with the source properly. Any suggestions over this ? Oct 11, 2017 at 11:57
61

my 2 cents:

$('#theDiv').prepend($('<img>',{id:'theImg',src:'theImg.png'}))
3
  • i like this answer cuz of the $('<img>') usage, was looking for it.
    – user734028
    Apr 28, 2018 at 6:00
  • you can also add attributes after the $('<img').attr('id', 'theImg').attr('src', 'theImg.png')
    – Scott
    Jan 27, 2020 at 16:18
  • 1
    isnt this the correct answer?
    – bonobo
    Sep 20, 2021 at 7:17
27
$("#theDiv").append("<img id='theImg' src='theImg.png'/>");

You need to read the documentation here.

0
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>
2
  • 1
    I suggest you to add some explanation.
    – Olter
    Sep 19, 2014 at 7:35
  • 1
    If we want to change the content of <div>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); } <div id="image"></div> <div><a href="javascript:image();">First Image</a></div> Sep 19, 2014 at 13:02
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);
0
2
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);

            }
0

this is the best way :

$(selector).prepend()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.