JSの問題点LIの追加に関する問題

Question

liの追加に問題があります。私が新しいliのテキストを追加すると、最初のliに入り、次のliにあるはずです。 https://jsfiddle.net/zaxmy1nw/1/ おそらく問題はここにあります。

function NewLI(){ 
    AddLi; 
    userp.appendChild(userName); 
    LiP.appendChild(LiText); 

    var UladdLi = document.getElementById("chat").appendChild(AddLi); 
    var AddP = document.getElementById("lispan").appendChild(LiP); 
    var UseraddLi = document.getElementById("lispan").appendChild(userp); 
} 

Answer 1

あなたはIdで選択しますが、すべてのliの要素は同じid（lispan）を持っているので、IDによって選択すると、常に最初のものを返します。あなたは何ができるか

は次のとおりです。

function NewLI(){ 
    AddLi; 
    userp.appendChild(userName); 
    LiP.appendChild(LiText); 
    AddLi.appendChild(LiP) 
    AddLi.appendChild(userp) 
    var UladdLi = document.getElementById("chat").appendChild(AddLi); 

} 

参照：https://jsfiddle.net/zaxmy1nw/2/