Question

我尝试将文本项添加到对象中保存的值数组中的列表中。

我的JS看起来像这样 -

var MiFiveLog = function(person) {                        

    var ul = document.querySelector('.logged-interactions-list');

    for (i = 0; i < person.loggedMessages.length; i++) {
        var li = document.createElement('li');
        var textNode = document.createTextNode(person.loggedMessages[i]);
        ul.appendChild(textNode);
    }
}

人员构造函数 -

Person = function(name) {
    this.name = name,
    this.loggedMessages = []
}

看起来很简单，但脚本给了我以下控制台错误

未捕获的TypeError：无法执行＆＃39; appendChild＆＃39; on＆＃39; Node＆＃39;：参数1不属于＆＃39; Node＆＃39;。

有点困惑 - 会感激任何帮助。

谢谢，

Answer 1

您的代码应该有效，但您还没有向我们展示您的person对象的外观，因此很可能是罪魁祸首。如果您查看下面的示例，您将看到对象需要设置的结构，以便在循环中使用语法：person.loggedMessages[i]。

此外，您应该将文本节点附加到列表项而不是列表中，然后列表项应该附加到列表中。

最后，您可以跳过文本节点的显式构造（如果您愿意），只需使用textContent属性。

见下面的评论：

＆＃13;

// Here's your object structure, which is OK, but you have to instantiate it
var Person = function(name) {
    this.name = name,
    this.loggedMessages = []
}

// Instantiate the object and populate the array property:
var p2 = new Person("John Doe");
p2.loggedMessages.push("message 1");
p2.loggedMessages.push("message 2");
p2.loggedMessages.push("message 3");
p2.loggedMessages.push("message 4");

var MiFiveLog = function(person) {                        

    var ul = document.querySelector('.logged-interactions-list');

    for (i = 0; i < person.loggedMessages.length; i++) {
        var li = document.createElement('li');
        
        // You can accomplish this the way you were attempting except that the
        // text nodes should be appended to the list items, not the list:
        //var textNode = document.createTextNode(person.loggedMessages[i]);
        //li.appendChild(textNode);  
        
        // Or, you can skip the text node and appending it to the list item completely
        // and just insert the text into the list item:
        li.textContent = person.loggedMessages[i]
        
        ul.appendChild(li);  // The list items should be appended to the unordered list
    }
}

MiFiveLog(p2);  // Invoke the function and pass it the instance

＆＃13;

<ul class="logged-interactions-list"></ul>

＆＃13;

无法执行＆＃39; appendChild＆＃39;将文本内容附加到列表中的项目时出错

1 个答案: