リスト内のアイテムにテキストコンテンツを追加するときに 'appendChild'エラーを実行できません

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 = [] 
} 

は十分に簡単に見えますが、スクリプトは私に次のコンソールエラー

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

少し混乱を与えています - 助けていただければ幸いです。

おかげで、

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>