Why does this work for IE but not for Firefox or Chrome?

Question

I have created a signfield in javascript and php. The User can write in the field with the mouse. Javascript reads out the coordinates and sends them to a php script wich generates an image. a new image is created every time the mouse is moved and it is moved into a div via javascript. The problem is, that this works fine for IE 8, but it doesn't for Firfox or Chrome. Here is the relevant part of my code:

.mousemove(function(e)
{
    if(mouseDown)
    {
        //alert("debug");
        //$("#debug").html($("#debug").html() + e.pageX + ", " + e.pageY + "<br>");
        coordhdl.addCords(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
        //$('#test').load('showCoordinates.php');
        var coordinations = coordhdl.getCords();
        $('#signature').remove();   

        //IMPORTANT LINE:
        $('#test').prepend('<img id="signature" src="showCoordinates.php?cords=' + coordinations + '" alt="braso"');
    }
});

I also tried to load an image that is on the filesystem instead using the php script. That doesn't work either. So the problem can't be the communication between the javascript and the php script.

Answer 1

I think it should be

$('#test').prepend('<img id="signature" src="showCoordinates.php?cords=' + coordinations + '" alt="braso"/>');

You missed />

Answer 2

Two problems: you're appending image with same ID and don't close the image tag.. try this instead:

var newImg = $("<img />").attr("src", "showCoordinates.php?cords=" + coordinations).attr("alt", "braso");
$('#test').prepend(newImg);