Help! Generating new <img> tags

[ThePsudo]

# SIMPLE VERSION #
Is there a way I can create a new <img> tag onClick?


# DETAILED VERSON #
I'm making a game that involves drawing a path between two points on a
grid. I've got the pathfinding routine working fine, but drawing it
out on a grid is proving difficult. Since I can't just draw a line
segment, I made a set of graphics to use: a bit of horizontal line,
vertical line, and two diagonals. I just take a few copies of each and
move them around to where they need to be. However, the number of
these graphics (and, thus, the number of <img> tags) I'm going to need
is impossible to predict. How can I add (and, for extra credit,
remove) <img> tags to the page without having to reload?


# PSEUDO-CODE VERSION #
function NewImg(url){
document.addHTML('<img src="' + url + '" alt="">');
}
..
..
..
<input type="button" value="Add" onClick="NewImg(url);">

 

[Fred Oz]

# SIMPLE VERSION #
Is there a way I can create a new <img> tag onClick?


# DETAILED VERSON #
I'm making a game that involves drawing a path between two points on a
grid. I've got the pathfinding routine working fine, but drawing it
out on a grid is proving difficult. Since I can't just draw a line
segment, I made a set of graphics to use: a bit of horizontal line,
vertical line, and two diagonals. I just take a few copies of each and
move them around to where they need to be. However, the number of
these graphics (and, thus, the number of <img> tags) I'm going to need
is impossible to predict. How can I add (and, for extra credit,
remove) <img> tags to the page without having to reload?


# PSEUDO-CODE VERSION #
function NewImg(url){
document.addHTML('<img src="' + url + '" alt="">');
}

function NewImage(u){
var oImg = document.createElement('img');
oImg.src = u;
oImg.alt = '';
document.getElementsByTagName('body')[0].appendChild(oImg);
}

[...]

 

[ThePsudo]

That'll work, thanks!