I have a chat system I'm trying to develop and am playing around with jQuery.

At the moment, I have something like this to constantly update the chat to make sure new messages are loading:

setInterval(refreshMessages, 1000);

function refreshMessages() {
    console.log("Refreshing messages");
    $("#conversation_container").load(location.href+" #conversation_container>*","");
}

This ensures that this happens across all browsers, and not just for the user who submitted a new message if I had nested this function call in an AJAX request upon 'submit message button click'.

Obviously, this is probably inefficient since this is being done every 1 second. Is there a way to perhaps, instead of reloading the entire div, just get the new <div class="messages"> that have been added to the conversation and append those? Or any other ways to make this a bit more efficient? Instead of forcing a user to reload the page themselves or querying the page every second.

<div id="conversation_container">
    <div class="message">
      First Message!
    </div>
</div>
<form>
  <input id="conversationID" type="hidden"></input>
  <input id="messageInput" name="message" placeholder="Type your message here" type="text"></input>
  <input id="sendMessage" type="submit" value="Send"></input>
</form>

(There is some Ruby backend here to store the messages and save them to the array of messages that will be shown on the page).