从模块中添加模板和追加元素的最快方法

Question

使用jQuery和Javascript，我正在从一组消息中构建一个聊天框。我目前的设置与此类似：

HTML：

<div id="messageTemplate">
  <div class="messageContainer">
    <div class="chatMessage"></div>
    <div class="chatTime"></div>
    <div class="chatActions">
      <span class="chatAction deleteMessage">Delete</span>
    </div>
  </div>
</div>

使用Javascript：

var template=$('#messageTemplate');
var chatbox=$('#chatbox');

$.each(messageArr,function(index,messageObject) {
  var newMessage=$(template.html()); //Make a new DOM
  newMessage.find('div.chatMessage').text(messageObject.message);
  newMessage.find('div.chatTime').text(messageObject.time);
  newMessage.find('div.chatAction.deleteMessage').click(function() {
  //Delete message Code
});  
  //Append newMessage to chatbox
  newMessage.appendTo(chatbox);
});

此代码有效，但在阅读this article后，我发现这根本没有效率。有超过100条聊天消息，这开始变慢。

最好的方法是什么？不是要为我编写代码，而只是关于最佳模板方法的一般指南，构建html，追加和添加点击处理程序？