CODEWITHSUNDEEP
javascriptdom
Andrew De Forest
Andrew De Forest

Reputation: 7338

Adding an img element to a div with javascript

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>

Upvotes: 84

Views: 276253

Answers (5)

PedroMiotti
PedroMiotti

Reputation: 1124

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

Upvotes: 1

Some Guy
Some Guy

Reputation: 16210

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.

Upvotes: 34

J W
J W

Reputation: 386

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

Upvotes: 2

hema
hema

Reputation: 51

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>

Upvotes: 5

Ghyath Serhal
Ghyath Serhal

Reputation: 7632

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

not

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

and use the below to set the source

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

Upvotes: 86

Related Questions