How do I append a DIV with HTML

[jason310771]

Can anyone suggest how I place HTML in to a DIV using the javascript below?  I am wanting to format each part of the text differently so for now using DIV so I can place styling in later on.  Or is there a better way ?

 

<script type="text/javascript">
var quote = new Array();
quote[0] = "<div>They were absolutely brilliant.</div><div>Kate</div>";
quote[1] = "<div>They were so helpful.</div><div>Fi</div>";
quote[2] = "<div>altogether we were happy with the company.</div><div>sal</div>";
quote[3] = "<div>Professional and helpful.</div><div>kobi</div>";
quote[4] = "<div>The move was done smoothly.</div><div>Claire</div>";

var qno = 0;
var timer; 
//*********************************
// Add a message to the DIV 
//*********************************
function addMsg() 
{
obj = document.getElementById('divQuote');
txt = document.createTextNode(quote[qno]);
obj.appendChild(txt);
obj.appendChild(document.createElement('hr'));
qno++;
if (qno == quote.length-1)
{
	qno = 0;	//clearInterval(timer); //clear the timer if all the quotes are done!
}
//Apply Scroll
var currentScrollHeight = obj.scrollHeight;
if (currentScrollHeight >= parseInt(obj.style.height)) // check if the scroll bar is visible now.
{
	obj.scrollTop=(obj.scrollTop +100); //set the scroll height to scroll by here. (currently set to 100)
}
}


//*********************************************
// Start a timer to add the messages on load.
//*********************************************
function populate() 
{
timer = setInterval('addMsg()', 2000); // start an interval timer.
}

</script>

<div id="divQuote" style="height: 700px; width: 180px; overflow: auto; text-align: left; font-size: 9pt;"></div>

[nogray]

You can use innerHTML instead of creating a txt node,

e.g.

obj.innerHTML = quote[qno] + obj.innerHTML; // append html to the top
obj.innerHTML += quote[qno]; // append html to the bottom