Javascript / XML / HTML清除并重写

Question

With this Javascript code:

            arrLocations = xmlHTTP.responseText.split("~");
        for (i = 0; i < arrLocations.length; i++){

            // Extract the info for this button.
            strLocation = arrLocations[i];
            arrLocation = strLocation.split(";");

            // Populate the contents of this button.
            elTemp = document.getElementById('loc' + arrLocation[0]);
            if (arrLocation[2].length > 0)
                elTemp.innerHTML = elTemp.innerHTML + '<br><span style="font-size: 12px; font-weight: bold;">' + arrLocation[2] + ' ' + arrLocation[3] + '</span><br><span style="font-size: 10px;"> (' + arrLocation[4] + ')' + '</span><br>';
            else
                elTemp.innerHTML = arrLocation[1];

        }

I am writing to the inside of a button... To display a name and date etc... Like this example:

Here is the button HTML:

<table align="center" cellpadding="3" cellspacing="3" border="0">

                        <tr>
                            <td width="30%" align="center" valign="middle" id="loc1" nowrap style="cursor: hand; font-size: 36px; border: 9px outset orangered;" class="bodyText" onClick="updateLocationTable(1);">Finesse</td>

                            <td width="5%" align="center" valign="middle" nowrap class="bodyText"></td>
                            <td width="30%" align="center" valign="middle" id="loc2" nowrap style="cursor: hand; font-size: 36px; border: 9px outset orangered;" class="bodyText" onClick="updateLocationTable(2);">Rework</td>

                            <td width="5%" align="center" valign="middle" nowrap class="bodyText"></td>
                            <td width="30%" align="center" valign="middle" id="loc3" nowrap style="cursor: hand; font-size: 36px; border: 9px outset orangered;" class="bodyText" onClick="updateLocationTable(3);">OP/Masking</td>
                        </tr>
                        <tr>
                            <td align="center" valign="middle" colspan="3" nowrap class="bodyText">&nbsp</td>
                        </tr>

                </table>

My problem is that every time I call this function... It does not clear what is already in the button, it just writes over the top of that... How can I clear what is inside that button's HTML before I do another rewrite?

When I do another add, it ends up looking like this: It keeps the previous write, then rewrites again just adding one... So if A and B are logged the screen shows A + B... if C tries to log in... It keeps A + B but then rewrites A + B and adds C so we end up with A+B+A+B+C

Answer 1

Just so everybody knows... I solved the problem with a simple location.reload()

I put this inside the function that is called when the button is pressed... This allowed the additional write to happen, but also refreshed the page which would load only whats in the database, which was the correct information anyway... I am basically just hiding the problem but it works for what I need it for!

Thanks for all the helpful suggestions!