尝试附加基本html时,Node.appendChild的参数1不是对象

时间:2016-07-09 02:32:12

标签: javascript

一般信息
我目前正在使用websocket进行聊天系统。除了消息之外,我使用相同的websocket向用户显示当前在线用户列表。

问题
几天以来,我一直试图用OOP方法编写所有Javascript脚本。到目前为止,情况相当不错,但现在我已经弄错了一个我真的不理解的错误:

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

所以问题是:我做错了什么,解决它的最佳方法是什么?

1 个答案:

答案 0 :(得分:5)

ListUser是一串HTML。 Node.appendChild仅接受DOM节点作为参数。

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

这里有两个选项,要么在节点中包装所需的文本并使用appendChild,要么保留当前的设置并使用innerHTML,这允许您在HTML文档中添加一个字符串:< / p>

List.innerHTML += ListUser