Не удалось выполнить ошибку appendChild при добавлении текстового содержимого к элементам в списке

Question

Я пытаюсь добавить текстовые элементы в список из массива значений, хранящихся в объекте.

My 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 конструктор -

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

выглядит достаточно простой, но сценарий дает мне следующую ошибку консоли

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Bit запутался - был бы признателен за любую помощь.

Спасибо,

Answer 1

Ваш код должен работать, но вы не показали нам, что ваш person выглядит объект, так что, скорее всего, виновником. Если вы посмотрите на мой пример ниже, вы увидите структуру, с которой объект должен быть настроен, чтобы использовать синтаксис: person.loggedMessages[i] в цикле.

Кроме того, вы должны добавить свои текстовые узлы в элементы списка, а не список, а затем элементы списка должны быть добавлены в список.

Наконец, вы можете пропустить явное построение текстового узла (если хотите) и просто использовать свойство textContent.

Смотрите комментарии ниже:

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

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