一旦插入一定数量的段落（不使用jquery，如何从div中删除段落）

Question

我有一个迷你聊天应用程序，该应用程序仅应显示最近的100条消息。我使用的是socket.io，因此每次发送消息时，所有连接的客户端都会收到该消息。为了在前端显示消息，我将这样插入HTML：

let msgs = document.getElementById('msgs');

socket.on('chat', data => {
msgs.innerHTML += `<p>${data.nickname}: ${data.text}</p>`
 });

我的问题是，如果有100条消息，我将删除第一条消息，该怎么办？我将以下代码放在客户端JS文件的末尾，但它没有执行任何操作

if (msgs.children.length > 100) {
    messageOutput.removeChild(messageOutput.childNodes[0]);
}

Answer 1

您可以获取div的所有直接子代，并检查函数中子代的长度是否大于100，并且必须给该段落一个类以供选择

const msgs = document.getElementById('msgs');
const messages = document.querySelectorAll('.message') 

socket.on('chat', data => {
if(messages.length < 100) {
 msgs.innerHTML += `<p class.message>${data.nickname}: ${data.text}</p>`
}else {
messageOutput.removeChild(messageOutput.childNodes[0]);

}
 });

我建议您不要使用innerHTML方法在这里您可以阅读有关它的信息，而可以使用appendChild（）方法