var userMessage = robotSays;
function submitUserMessage(){
var message = document.getElementById("user-input");
if(message.value){
// YOU
var you = document.createElement("h4");
var youText = document.createTextNode("You");
you.appendChild(youText);
you.className = "ytitle";
document.body.appendChild(you);
insertAfter(userMessage, you);
// User's message
userMessage = document.createElement("span");
var userMessageText = document.createTextNode(message.value);
userMessage.appendChild(userMessageText);
userMessage.className = "umsg";
document.body.appendChild(userMessage);
insertAfter(you, userMessage);
}
}
Inserting an element right after the sibling in Javascript
-
03-06-2022 - |
Question
I'm making a posting system that when the user types in a message, it creates a few elements and puts it below the "robot" chat message. If the user inputs two different messages, the latest input message goes above the other user message. I want them to go from top to bottom in chronological order.
This doesn't seem to work: (the if/else part)
function submitUserMessage(){
var message = document.getElementById("user-input");
if(message.value){
// YOU
var you = document.createElement("h4");
var youText = document.createTextNode("You");
you.appendChild(youText);
you.className = "ytitle";
document.body.appendChild(you);
insertAfter(robotSays, you);
// User's message
var userMessage = document.createElement("span");
var userMessageText = document.createTextNode(message.value);
userMessage.appendChild(userMessageText);
userMessage.className = "umsg";
document.body.appendChild(userMessage);
insertAfter(you, userMessage);
} else if(userMessage){
userMessage.nextSibling.insertAfter(this);
}
}
Here's a fiddle of my post system :: http://jsfiddle.net/MatthewKosloski/YWWMW/
(Use the enter key to submit)
Solution
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow