I am trying to implement a chat. I want to display the messages in a div. My model looks like:

```
<div id="chatcontentcontainer">
   <div id="messageid">
       <div class="sender">sender name</div>
       <div class="messagebody">message text</div>
   </div>
   .....
   .....
</div>

```

and my javascript looks like:

```
var messages = responseXML.getElementsByTagName('ChatMessage');
var chatContainer = document.getElementById('chatcontentcontainer');
for (var i = 0; i < messages.length; i++)
{
    var msg = messages[i];
    var x = document.createElement('div');
    x.id = msg.children[0].textContent;
    x.innerHTML = msg.children[1].textContent;
    chatContainer.appendChild(x);
    _lastMessageId = x.id;
}

```

This fills the div with messages without the sender info. For beginning there are just messages. 
How can I change this to check if a message was already displayed? Do you have any other suggestion for showing messages ... I am interesting in performance because this will be refresh every 5 second. 

Is there any other way of selecting msg.children[0] something like msg.children['Id'] without impacting performances?