Question

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?

Answer 1

Each div that you add to the list needs to be annotated with information that exists in the data. For example, you could give the divs an id of child_id_{x} if each msg has an id.

Then, you could change your code to have an added check based on the id to make sure that element does not exist.

Make sense?