Add img attributes using JavaScript

Question

I know that this question has been asked several times, but I have problems when I try to appendChild the img to a div. Here is the code:

var picture = document.createElement("img");
 picture.id= "xmark";
picture.src= "x.png";
picture.setAttribute("position","absolute");       
picture.setAttribute("bottom", 100 + 'px'); 
picture.setAttribute("left",500 + 'px');
//I also tried
picture.style.bottom= 100 + 'px'; 
picture.style.left = 100 + 'px';  
// I even tried this, but returns "cannot read property style of null" error
document.getElementById("xmark").style.bottom=100+"px";

document.getElementById("divmax").appendChild(picture);

<div id="divmax"></div>

Yes, the jpg files are saved correctly. I checked.

Of course trying to find the picture in the document will fail - you only add it AFTER the lookup. If you swap the last two JS lines, it works. — VLAZ, Sep 01 '16 at 19:30
the problem is that nothing happens. the style is not changed by my attribution — s.dragos, Sep 01 '16 at 19:30

score 0 · Answer 1 · answered Sep 01 '16 at 19:33

This is working, just change your position property so it's like the other way you tried:

var picture = document.createElement("img");
picture.id= "xmark";
picture.src= "https://placehold.it/250x250";
picture.style.position = 'absolute';
picture.style.bottom = 100 + 'px'; 
picture.style.left = 100 + 'px';  

document.getElementById("divmax").appendChild(picture);

<div id="divmax"></div>

Add img attributes using JavaScript

1 Answers1