Estoy tratando de agregar un img al placehere div usando JavaScript, sin embargo, no estoy teniendo suerte. ¿Alguien puede echarme una mano con mi código?

 {amp}lt;html{amp}gt; {amp}lt;script type="text/javascript"{amp}gt; 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"); {amp}lt;/script{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div id="placehere"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 
 document.getElementById("placehere").appendChild(elem); 

no

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

y use el siguiente para configurar la fuente

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

Debería ser:

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

Y coloque su div antes de su javascript, porque si no lo hace, el javascript se ejecuta antes de que exista el div. O espera a que se cargue. Entonces su código se ve así:

 {amp}lt;html{amp}gt; {amp}lt;body{amp}gt; {amp}lt;script type="text/javascript"{amp}gt; 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); } {amp}lt;/script{amp}gt; {amp}lt;div id="placehere"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Para probar mi punto, vea esto con la carga y esto sin la carga . Encienda la consola y encontrará un error que indica que el div no existe o no puede encontrar el método appendChild de nulo.

 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); } {amp}lt;span id="fooBar"{amp}gt;{amp}amp;nbsp;{amp}lt;/span{amp}gt; 

La siguiente solución parece ser una versión mucho más corta para eso:

 {amp}lt;div id="imageDiv"{amp}gt;{amp}lt;/div{amp}gt; 

En Javascript:

 document.getElementById('imageDiv').innerHTML = '{amp}lt;img width="100" height="100" src="images/hydrangeas.jpg"{amp}gt;';