前置元素

我正在嘗試動態生成聊天，但消息插入之前的含義下方，用戶必須向下滾動才能看到一條不太好的新消息！我試圖改變它，以便將消息插入到最後一條消息的上方。前置元素

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'.

來源

2015-12-02 stertz

根據http://www.w3schools.com/jsref/met_node_insertbefore.asp，您可能反轉了insertBefore的兩個參數。 – jkoestinger

好像oldMsg是一個字符串類型。您必須使用oldMsg撥打document.createTextNode才能使其工作。

來源

2015-12-02 22:39:44 Quy

您可能需要將您的消息包裝在文本節點中。

document.createTextNode("chat-message");

您的錯誤消息表明您的文本不是有效節點。

參數2的類型不是 '節點'

見的：MDN - Document.createTextNode()

onReady('#message-window', function() { 
 
    pushNewMessage('Third!'); 
 
    pushNewMessage('Second!'); 
 
    pushNewMessage('First!'); 
 
}); 
 

 
function pushNewMessage(chatBoxMessage) { 
 
    var errorMessageDiv = document.createElement('div'); 
 
    errorMessageDiv.className = 'chat-message error'; 
 
    errorMessageDiv.appendChild(document.createTextNode(chatBoxMessage)); 
 

 
    //Insert message 
 
    var messageWindow = document.getElementById('message-window'); 
 
    
 
    messageWindow.insertBefore(errorMessageDiv, messageWindow.firstChild); 
 
} 
 

 
// Convinience function -- Wait for element or body load... 
 
function onReady(selector, callback, ms) { 
 
    var intervalID = window.setInterval(function() { 
 
    if ((document.querySelector(selector) || document.body) !== undefined) { 
 
     window.clearInterval(intervalID); 
 
     callback.call(this); 
 
    } 
 
    }, ms || 500); 
 
}

<div id="message-window"> 
 
</div>

來源

2015-12-02 22:40:16

我已經給了這個嘗試，但我得到一個錯誤，說'新節點將被插入之前的節點不是這個節點的孩子。' 我猜是因爲'消息窗口'是容器和我想插入到該容器中的新消息將出現在舊的消息之上。這些消息不是彼此的孩子。 – stertz

我給你的變量描述了更多的名字，再試一次。 –

我製成的樣本實現。希望這是你在找什麼：

HTML：

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

的Javascript：

// 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; 
}

希望這有助於並且是你在找什麼。示例實現：http://jsfiddle.net/f1d02e49/

來源

2015-12-02 23:26:37 SaurabhM

回答

相關問題