Journal: Appending Text To DIVs

This is actually about Javascript, but I see that Slashdot does not have a category for that.

I'm designing an AJAX chat system for my site and everything seemed fine until I decided to test embedding of a video. The problem is that the video resets every time a new line of text is added to the chat. I have been using the following method to insert new text into the DIV that holds the chat text:

MyDIV.innerHTML+=userinput

The += technique seems to cause a rewrite of the contents of the DIV instead of merely appending at the end. I have only tested in Firefox 3.0.9 and don't know if it works in other browsers, but it doesn't really matter. If it doesn't work in this browser, then I can't use it.

An alternative method for appending text is to create a text node and to append it. The problem with that is text nodes don't allow HTML. Everything in the text node is displayed as plain text with the HTML code visible. I can append elements to get the formatting that I want for the user name and time, but the situation gets complicated if I want to allow users to insert their own HTML within the chat. The only solution I see to make this technique work is to do some complicated lexical analysis which seems like too much work just to let people watch videos inside of chat.