Inserting multiple lines of text with innerHTML

I know there have been several posts about the DOM but I found a fabulous site that, in my opinion, is better than the W3Schools stuff. I have been trying to figure out how to display multiple Events using innerHTML with no success. Every time I looped through the Events all I would end up with is the last one. I thought about using the createElement, createTextNode and appendChild methods but that would involve re-thinking things and It was just not real clear how that all works.

I have looked for better explanations about some of these functions, especially innerHTML. Till I stumbled on this site it seemed like I wasn’t going to get it to work and would end up createElement, createTextNode and appendChild to displayed event information.

This is what I did to get innerHTML to work with multiple Events:

for (i =0; i < something.length; i++) // loop
{
// initialcontent stores the initial text in my "eventDetails" DIV
var initialcontent = document.getElementById("eventDetails").innerHTML;

// I put some text into the evnetDetails DIV
var state = xmlDoc.getElementsByTagName('state')[i].firstChild.nodeValue;
document.getElementById("eventDetails").innerHTML = "State: " + state;

// finalcontent stores the information I just put in eventDetails DIV
var finalcontent = document.getElementById("eventDetails").innerHTML;

// I use innerHTML to display initialcontent + finalcontent
document.getElementById("eventDetails").innerHTML = initialcontent + finalcontent;
}
// end for loop

I have run accross quite a few comments stating that we shouldn't use innerHTML.

I may try and use createElement, createTextNode and appendChild and what ever else I need to displayed event information.

This site has excellent explainations and examples on how use, from what I can tell, all the DOM functions.