Node.appendChildの引数1は、基本HTMLを追加しようとするとオブジェクトではありません

Question

一般情報
私は現在websocketを使用してチャットシステムに取り組んでいます。メッセージ以外にも、同じWebSocketを使用して、現在オンラインのユーザーのユーザーリストをユーザーに提示しています。

問題
私はOOPのアプローチでは、純粋にスクリプトに私のJavascriptのすべてをしようとしてきた数日以来。これまでのところ、それはかなりうまくいっていますが、今、私は正直に理解していないエラー時にstumpledました：Node.appendChildの

引数1は、オブジェクト

私は「コード
ではありませんそこで質問がある

var CB = CB || {}; 

CB.messages = { 
    userListLayout: function(Username){ 
     var userListTable = "<table class='userTable' data-user='"+ Username +"'><tbody><tr><td><img src='layout/images/default_profile.png'></td><td>" + Username + "</td></tr></tbody></table>"; 

     return userListTable; 
    } 
} 

CB.users = { 
    set: function(Usernames) { 
     var List = document.getElementById('usersList'); // Represents an empty div 
     var i, j = Usernames.length, ListUser; 

     for (i=0; i<j; i++) { 
      ListUser = CB.messages.userListLayout(Usernames[i]); 
      List.appendChild(ListUser); // Error 
     } 
    } 
} 

：：私は間違って何をやっているし、それを修正するための最良の方法は何ですか？のみ重要な部分を表現するために、可能な限り自分のコードを絞り込んまし

Answer 1

ListUserはHTMLの文字列です。 Node.appendChildは引数としてDOMノードのみを受け入れます。

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

あなたはここに2つのオプションがあり、いずれかのノードにしたいテキストを折り返すとappendChildを使用するか、現在の設定を維持し、あなたがHTML文書に文字列を追加することができますどのinnerHTMLを使用します。

List.innerHTML += ListUser