자바 스크립트에서 형제 직후에 요소 삽입하기

Question

나는 사용자가 메시지를 입력 할 때 몇 개의 요소를 생성하고 "로봇"채팅 메시지 아래에 배치하는 게시 시스템을 만들고 있습니다. 사용자가 두 개의 서로 다른 메시지를 입력하면 최신 입력 메시지가 다른 사용자 메시지 위에 표시됩니다. 나는 그들에게 연대순으로 위에서 아래로 가기를 원한다.

이 작동하지 않는 것 (은 if/다른 부분)

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

여기에 내 게시물 시스템 :: http://jsfiddle.net/MatthewKosloski/YWWMW/

의 바이올린 (제출 키를 입력 사용)의

Answer 1

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