避免在 div 中嵌入媒體以通過 innerHTML 添加刷新

Question

我正在使用 socket.io 和節點構建聊天 web 應用程序。我正在使用 innerHTML 在 div 中添加用戶的聊天。但問題是，當將新消息添加到聊天容器（div 塊）時，聊天中存在的先前媒體 -每次添加新聊天時容器都會重新加載。我想避免這種情況。誰能幫我找到解決方案？我很想聽聽你的想法。 這是我正在使用的抽象代碼

HTML

<input type = "text" id = "message" placeholder="Type something..." /><i onclick = "sendMessage()" style="color:green;" title="Send" id="sendbtn"></i>

我沒有在表單元素中使用輸入

客戶端JS：

function sendMessage(){
   var msg = document.getElementById("message").value;
   if (msg) {
      postFile({message: msg,id:id, user: user, color: color,roomid:nativeRoom});
      socket.emit("msg", { message: msg,id:id, user: user, color: color,roomid:nativeRoom});             
   }
}
socket.on("newmsg",function(data){
   postFile(data);
   //Actually postFile is here because it can include video,audio as well
});
function postFile(data){
//here i want to prevent message-container div from reloading its previous media(i have ignored most of the css code to make it precise)
   document.getElementById('message-container').innerHTML += '<div class="messages '+data.user+'chatpiece" id="'+data.id+'"><div><div><b>'+data.user+'</b><img src="'+userprofileimagelink+'"/></div><span>' +{time_when_message_posted} +'</span></div><hr><span style="max-width:100%;word-wrap:break-word;font-size:1.1em;" class="messagemain">' +data.message+"</span></div>"; 
}

服務器端：

socket.on('msg',function(data){
  socket.broadcast.to(data.roomid).emit('newmsg',data);
});

我想避免在添加新消息時重新加載聊天容器中存在的視頻和音頻媒體。 我怎樣才能做到這一點？

Answer 1

考慮appendChild而不是每次都修改.innerHTML 。 一旦 web 頁面呈現 html，它就變成了 DOM。 Append 到 DOM，而不是“每次通過innerHTML將 DOM 轉換回 html，然后將額外的 HTML 字符串附加到該轉換”（就像你在做的那樣）。 如果您不了解DOM ，請了解它。