Javascript 前置元素

我正在尝试动态生成聊天，但消息会插入到上一条消息的下方，这意味着用户必须向下滚动才能看到一条不太好的新消息！我正在尝试更改它，以便将消息插入到最后一条消息的上方

var elementDiv = document.createElement("div");
elementDiv.className = "chat-message error";
elementDiv.appendChild(document.createTextNode(chatBoxMessage));
//Insert message
var oldMsg = "chat-message";
document.getElementsByClassName('message-window').appendChild(elementDiv);
document.body.insertBefore(elementDiv, oldMsg);

变量

chatBoxMessage

用于定义文本

运行此命令将抛出错误-

Uncaught TypeError: Failed to execute 'insertBefore' on 'Node' : parameter 2 is not of type 'Node'.

---

似乎

oldMsg

是字符串类型。您必须使用oldMsg调用

document.createTextNode

，它才能工作。

您可能需要将消息包装在文本节点中

document.createTextNode("chat-message");

错误消息表明您的文本不是有效节点

参数2不是“节点”类型

见：

onReady（“#消息窗口”，函数（）{
pushNewMessage（'Third！'）；
pushNewMessage（'Second！'）；
pushNewMessage（'First！'）；
});
函数pushNewMessage（chatBoxMessage）{
var errorMessageDiv=document.createElement（'div'）；
errorMessageDiv.className='聊天信息错误'；
errorMessageDiv.appendChild（document.createTextNode（chatBoxMessage））；
//插入消息
var messageWindow=document.getElementById（'message-window'）；
messageWindow.insertBefore（errorMessageDiv，messageWindow.firstChild）；
}
//便利功能--等待元素或主体负载。。。
函数onReady（选择器、回调、ms）{
var intervalID=window.setInterval（函数（）{
if（（document.querySelector（选择器）| | document.body）！==未定义）{
窗口。clearInterval（intervalID）；
回调。调用（此）；
}
}，ms | | 500）；
}

---

我制作了一个示例实现。希望这就是您要寻找的：

HTML:

---

希望这对你有所帮助，这也是你想要的。示例实现：

根据，您可能颠倒了insertBefore的两个参数。我尝试了一下，但我得到一个错误，即

在新节点之前插入的节点不是该节点的子节点。

我猜是因为

消息窗口

是容器，我想将新消息将插入该容器中的消息出现在旧的上面。这些消息不是彼此的子消息。我给了变量更具描述性的名称，请重试。

<div id='container'></div>

// select the container
var container = document.getElementById('container');

// create chat messages
var msg1 = createChatMsg('Chat1');
var msg2 = createChatMsg('Chat2');
var msg3 = createChatMsg('Chat3');

// Insert Messages
container.insertBefore(msg1, container.firstChild);
container.insertBefore(msg2, container.firstChild);
container.insertBefore(msg3, container.firstChild);

// create chatmessage
function createChatMsg(message) {
  var chatMsg = document.createElement('div');
  chatMsg.className = 'some-chat';
  chatMsg.appendChild(document.createTextNode(message));

  return chatMsg;
}