带有socket.io的Javascript改进了当前的实现

Question

所以我一直在阅读rethinkdb和套接字的教程来制作聊天应用。我已经完成了，但我在思考我在javascript方面制作它的方式是非常低效的，可以改进。 关于如何实际改进这个的任何想法？

这是html部分（使用jinja2但无关紧要

<ul id="chat-list" class="collection">
    {% for chat in chats %}
        <li class="collection-item highlight">
          <div class="col s12 m8 offset-m2 l6 offset-l3">
            <div class="lighten-5">
              <div class="row valign-wrapper">
                <div class="col s2 border_right">
                    <p class="black-text wrap center-align">
                        {{ chat.name }}
                    </p>
                    <div class="center-align">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPjOOT32EQQ7nrf8X964O7ULV_GNy6lkwK8yrsHojZ4BsNsDHw" alt="" class="circle max_image hoverable">
                    </div>
                </div>
                <div class="col s12">
                  <span class="black-text wrap">
                    {{ chat.message }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </li>
      <!--<li class="collection-item"><p class="s10">{{ chat.name }} - {{ chat.message }}</p></li>-->
    {% endfor %}
</ul>

这是javascript部分

<script>

var chatForm = document.getElementById('chat-form');
var nameInput = document.getElementById('name');
var messageInput = document.getElementById('message');
var chatList = document.getElementById('chat-list');

var socket = io.connect('http://' + document.domain + ':' + location.port);
socket.on('new_chat', function(data) {
  chatList.innerHTML = '<li class="collection-item highlight>"> \
          <div class="col s12 m8 offset-m2 l6 offset-l3"> \
            <div class="lighten-5"> \
              <div class="row valign-wrapper"> \
                <div class="col s2 border_right"> \
                    <p class="black-text wrap center-align">'
                        + data.new_val.name +
                    '</p> \
                    <div class="center-align"> \
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPjOOT32EQQ7nrf8X964O7ULV_GNy6lkwK8yrsHojZ4BsNsDHw" alt="" class="circle max_image hoverable"> <!-- notice the "circle" class --> \
                    </div> \
                </div> \
                <div class="col s12"> \
                  <span class="black-text wrap">'
                    + data.new_val.message +
                  '</span> \
                </div> \
              </div> \
            </div> \
          </div> \
        </li>' + chatList.innerHTML;
});

chatForm.addEventListener('submit', function(e) {
  e.preventDefault();
  var request = axios.post('/chats/', {
    name: nameInput.value,
    message: messageInput.value
  });
  request.then(function(data) {
    console.log(data);
  })
  messageInput.value = "";
});
</script>

我想知道如何改进这一点，尤其是javascript部分，因为我觉得很难修改当前形状的js中的html。