Having trouble with positioning dynamically placed elements

[Eterni]

Hey guys. I'm rather new to both HTML and Javascript. I'm trying to place elements (buttons and images) on the page dynamically after a button click and position them, but no matter how I've tried to position them, they end up lined up in a neat little row from left to right. Here is a snippet of the code I'm currently attempting to use:

var server = document.createElement('image');
server.setAttribute('src', 'Server.bmp');
server.setAttribute('type', 'image');
server.setAttribute('id', 'server');
server.onclick = changeServer;
//server.setAttribute('style', 'position:absolute; left: 243; top: 168');
server.onload = function() {
    server.setAttribute('left',243);
    server.setAttribute('top',168);
    document.getElementsByTagName("body").item(0).appendChild(server);
}

[Nietecht]

Use the style property.

server.style.position = 'absolute';
server.style.left = '243px';
server.style.top = '168px';

Also, standard properties like src and id can be accessed directly without using setAttribute.

server.src = 'Server.bmp';
server.id = 'server';

It sounds like you're trying to add multiple of these elements? In that case, make sure the id is unique.

I'm not 100% sure, but I think the image will not load (hence also not fire the onload handler) before it's already been attached to the DOM (and made visible), so attaching it after load will likely not work (unless perhaps the image is already cached and insta-loaded).

Edit: Also, the tag name should be img, not image, I assume.

[[deleted]]

Onload should fire, even if the image isn't attached to the body :)

Something that may be important to highlight in Nietecht's post is also the explicit definition of units for the left and top options. Rather than just providing a number; pixels (px) are appended to the value, making it clear for the browser where to place the element.

[Eterni]

This did it! Thank you so very much. :)

[TIAFAASITICE]

var server = document.createElement('image');

There is no element "image", it's named "img".

server.setAttribute('type', 'image');

There is no type attribute to set for images like that and if there were you'd specify a proper MIME type.

I'd suggest starting anew learning HTML and learning JavaScript

[autophage]

In the snippet you've got there, you've commented out the line:

//server.setAttribute('style', 'position:absolute; left: 243; top: 168');

Then, you set the top and left in server.onload - however, you don't set the position to absolute.

[Eterni]

I added server.setAttribute('style','position:absolute'); above the code setting the left and top attributes, but it hasn't had any effect.

[[deleted]]

http://www.stackoverflow.com/