Why does innerHTML only display one line of XML?

[npm]

Given that x.length is whatever number (let's say 20), then why does this:

<script type="text/javascript">
xmlDoc = loadXMLDoc("stations.xml");
x = xmlDoc.getElementsByTagName('city');
for (i=0;i<x.length;i++) {
if (x[i].parentNode.parentNode.getAttribute('id2')=='TX') {
document.write(x[i].childNodes[0].nodeValue + "<br />");
}
}
</script>

print the list of all 20 cities, but this:

<script type="text/javascript">
xmlDoc = loadXMLDoc("stations.xml");
x = xmlDoc.getElementsByTagName('city');
for (i=0; i<x.length; i++) {
if (x[i].parentNode.parentNode.getAttribute('id2')=='TX') {
document.getElementById("cityList").innerHTML = x[i].childNodes[0].nodeValue + "<br />";
}
}
</script>

displays only the last one in the list?

Thanks in advance?

[Dormilich]

displays only the last one in the list?

of course. in each loop cycle you set the .innerHTML property anew.

[npm]

That makes sense.

But is there a way to use innerHTML (or some other method instead of document.write) to display the whole list. I ask because I have lists from each state, and I'd like to have one script (maybe at the end of the page) that would display the appropriate data into each <div>. Right now I have 4 scripts (each using document.write) for each of the 50 states to display different data. It just seems like it would work faster and save some filesize to consolidate it into one script.

[Dormilich]

what yo need is to extend the string, like x = x + "1" or shorthand: x += "1"