Adding an img element to a div with javascript

Question

I am trying to add an img to the placehere div using JavaScript, however I am having no luck. Can anyone give me a hand with my code?

<html>
<script type="text/javascript">
var elem = document.createElement("img");
elem.setAttribute("src", "images/hydrangeas.jpg");
elem.setAttribute("height", "768");
elem.setAttribute("width", "1024");
elem.setAttribute("alt", "Flower");
document.getElementById("placehere").appendChild("elem");
</script>
<body>

<div id="placehere">

</div>

</body>
</html>

Ghyath Serhal · Accepted Answer · 2011-10-18 05:32:09Z

86

document.getElementById("placehere").appendChild(elem);

not

document.getElementById("placehere").appendChild("elem");

and use the below to set the source

elem.src = 'images/hydrangeas.jpg';

edited Oct 18, 2011 at 5:32

answered Oct 18, 2011 at 5:25

Ghyath Serhal

7,6326 gold badges47 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Andrew De Forest Over a year ago

OK, I took the var out of quotes but I still don't see an image

codeandcloud Over a year ago

@AndrewDeForest: appendChild expects an object and then it should work unless the path to your image is wrong. Check this jsfiddle.net/naveen/S57rs

Andrew De Forest Over a year ago

Hmm, I have no idea. I changed it to elem.src = "images/hydrangeas.jpg" and I still don't see it. I even wrote out the tag <img src="images/hydrangeas.jpg"> just to make sure the path was correct, and it showed up.

Ghyath Serhal Over a year ago

Are you sure that the script runs?

Andrew De Forest Over a year ago

I think my script was running before the DOM finished loading, so I added document.addEventListener("DOMContentLoaded", function() and it seemed to fix it!

Teocci · Accepted Answer · 2021-09-15 00:38:27Z

34

It should be:

document.getElementById("placehere").appendChild(elem);

And place your div before your javascript, because if you don't, the javascript executes before the div exists. Or wait for it to load. So your code looks like this:

window.onload = function() {
  var elem = document.createElement("img");
  elem.setAttribute("src", "http://img.zohostatic.com/discussions/v1/images/defaultPhoto.png");
  elem.setAttribute("height", "768");
  elem.setAttribute("width", "1024");
  elem.setAttribute("alt", "Flower");
  document.getElementById("placehere").appendChild(elem);
}

<div id="placehere"></div>

To prove my point, see this with the onload and this without the onload. Fire up the console and you'll find an error stating that the div doesn't exist or cannot find appendChild method of null.

edited Sep 15, 2021 at 0:38

Teocci

9,3751 gold badge71 silver badges56 bronze badges

answered Oct 18, 2011 at 5:34

Some Guy

16.2k10 gold badges61 silver badges68 bronze badges

6 Comments

RobG Over a year ago

Forget all the setAttribute calls, just set the properties directly: elem.src = ...; elem.height = ...; elem.alt = ...; and so on.

Some Guy Over a year ago

Agreed, but as far as I know, using this method has no drawbacks. Maybe we should set up a performance test on JSPerf

Some Guy Over a year ago

JSPerf test shows that setAttribute is actually faster. Nice.

RobG Over a year ago

The difference in performance is negligible, but for the record, here's one that goes the other way in some browsers. More to the point is the inconsistency of setAttribute across browsers versus the consistency of setting properties. In HTML5 compliant browsers the two do the same thing, so it is hardly surprising that performance in such browsers is nearly identical.

Some Guy Over a year ago

Perhaps it's faster if you aren't appending it. That's what I deduce from that test. You're right about consistency, of course.

|

Cebjyre · Accepted Answer · 2013-03-18 07:46:38Z

5

function image()
{
    //dynamically add an image and set its attribute
    var img=document.createElement("img");
    img.src="p1.jpg"
    img.id="picture"
    var foo = document.getElementById("fooBar");
    foo.appendChild(img);
}

<span id="fooBar">&nbsp;</span>

edited Mar 18, 2013 at 7:46

Cebjyre

6,6633 gold badges35 silver badges58 bronze badges

answered Mar 18, 2013 at 7:23

hema

511 silver badge1 bronze badge

Comments

J W · Accepted Answer · 2019-12-26 12:24:05Z

2

The following solution seems to be a much shorter version for that:

<div id="imageDiv"></div>

In Javascript:

document.getElementById('imageDiv').innerHTML = '<img width="100" height="100" src="images/hydrangeas.jpg">';

answered Dec 26, 2019 at 12:24

J W

3862 silver badges6 bronze badges

Comments

PedroMiotti · Accepted Answer · 2021-11-18 11:15:02Z

1

In case anyone is wondering how to do it with JQuery:

$("<img height='200' width='200' alt='testImage' src='https://avatars.githubusercontent.com/u/47340995?v=4'> </img>").appendTo("#container");

Ref: https://api.jquery.com/jQuery/#jQuery2

answered Nov 18, 2021 at 11:15

PedroMiotti

1,16411 silver badges13 bronze badges

Collectives™ on Stack Overflow

Adding an img element to a div with javascript

5 Answers 5

5 Comments

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related