避免 div 中嵌入的媒体通过 innerHTML 在添加时刷新

Question

我正在使用 socket.io 构建一个聊天网络应用程序，并且 node.I 正在使用 innerHTML.But 在 div 中添加用户的聊天，问题是当一条新消息是添加到聊天容器（div 块），每次新聊天 added.I 想要避免 this.Can 任何人帮助我找到解决方案时，聊天容器中以前的媒体都会重新加载这个？我很想听听你的想法。这是我正在使用的抽象代码

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 instead of modifying the .innerHTML each time. Once a web page renders html, it becomes DOM. Append to the DOM instead of "converting DOM back into html via innerHTML each time and then appending additional HTML strings to that conversion" (like you're doing). Learn about DOM。

避免 div 中嵌入的媒体通过 innerHTML 在添加时刷新

Avoiding media embedded in div to get refreshed on addition by innerHTML

javascript

socket.io-1.0