Creating an image array to place in a div

I am trying to create a dollar value (as images) to post to an html page. By this I mean that if the value is 15.25 then on the page I need to have a div with an image of a [1], [5], [.], [2], and [5].

I have tried to take each digit individually, find its value (and the correct image) and append it to a blank div I have. This is how I have been approaching it:

//Get each digit and find the correct number image for it
for (var x = 0; 开发者_如何学Gox < valueLength; x++) {
    //Gets the current digit
    tempDigit = value.toString().charAt(x);

    //Find out what the digit is
    switch (tempDigit) {
        case "0":
            //Gets image
            img.src = "Images/Temp/0.png";
            //Append image to end of div
            document.getElementById(valueDiv).appendChild(img);
            break;
        case "1":
            //Gets image
            img.src = "Images/Temp/1.png";
            //Append image to end of div
            document.getElementById(valueDiv).appendChild(img);
            break;
        case "2":
            //Gets image
            img.src = "Images/Temp/2.png";
            //Append image to end of div
            document.getElementById(valueDiv).appendChild(img);
            break;

This goes on until case "." (decimal point), and valueDiv = 'valueDiv' on my html page. As of now I get all the correct values, but only the last image is visible (in the case of 15.25 i will see a 5)

Is there a way to not overwrite the previous append using this method or a better way to do this?

---

Currently, you are referring to the same image element each time. You have to create a new image element each time through the for-loop:

img = document.createElement("img");

---

Instead of creating images and appending them, could you instead write out the code into a string? You'd append a string like <img src="Images/Temp/1.png" alt="1" /> in to another string, and then insert the completed string into the innerHTML value of the container div.

There's probably a simpler way to do this as well - rather than a long case statement, do a string replacement for the decimal point with "d". Name your image set 0.png, 1.png, 2.png (etc) as you already have. Include "d.png" for your decimal point in this set. Then loop over the string value but instead of the switch/case, construct the string value from the current character. This works for your current method of creating an image or for outputting a string:

value.replace(".", "d")
//replace the decimal point with a letter d

text = '';
for (var x = 0; x < valueLength; x++) {
    //Gets the current digit
    tempDigit = value.toString().charAt(x);

    text = text + '<img src="Images/Temp/' + tempDigit + '.png" alt="' + value + '" />';
    //or, if you prefer, do: img.src = "Images/Temp/' + tempDigit + '.png";
}

No switch/case needed. As a bonus I set the alt text of each character image to the full value - so when you hover your mouse over any part of the image you get a tooltip for the full value string.

---

Something like this: http://jsbin.com/orene3/2/edit ?

A few improvements: only append to the document once; use a document fragment to create a temporary holder; use a sprite instead of individual images; and input the text inside the span and then text-indent to move them off the screen (for accessibility).