ul javascriptにliを動的に追加します。

Question

名前の配列があり、私のページに表示したいのですが。 私は自分のhtml

<ul id="friendsList"> 
</ul> 

に空のULを作成したそして今、私はこのオールに名前を追加したいが、私は

for (var i = 0; i < names.length; i++) { 
    var name = names[i]; 
    var li = document.createElement('li', name); 
    li.parentElement('friendsList'); 
} 

エラーが動作しません： 例外は、ユーザー・コールバックによってスローされました。例外TypeError：li.parentElementはあなたがあなたのliulにを追加する必要がある機能

Answer 1

ではありません。このdocument.createElement('li', name);は機能しません。

構文

document.createElement(tagName[, options]); 

tagName: A string that specifies the type of element to be created.

options (Optional): An optional ElementCreationOptions object containing a single property named is, whose value is the tag name for a custom element previously defined using customElements.define() .

document.createElement() documentation

var names = ['John', 'Jane'] 
 

 
for (var i = 0; i < names.length; i++) { 
 
    var name = names[i]; 
 
    var ul = document.getElementById("friendsList"); 
 
    var li = document.createElement('li'); 
 
    li.appendChild(document.createTextNode(name)); 
 
    ul.appendChild(li); 
 
}

<ul id="friendsList"> 
 
</ul>

Answer 2

例の下に試してみてください - あなたはgetElementを使用してしまいますあなたのUL、上のappendChildを使いますByIdは（）：あなたがそこにあるノードを挿入したい場合は

（あなたが指定されたノードの親ノードを検査したい場合はIE）を

var names = ["John","Mike","George"] 
 
for (var i = 0; i < names.length; i++) { 
 
    var name = names[i]; 
 
    var li = document.createElement('li'); 
 
    li.innerHTML = name; 
 
    document.getElementById('friendsList').appendChild(li); 
 
}

<ul id="friendsList"></ul>

Answer 3

Node.parentElementは読み取り専用のプロパティです

解決策の1つは、親ノードで方法appendChildを使用することです。

この

const fragment = document.createDocumentFragment(); 
for(let name of names){ 
    const li = document.createElement('li'); 
    li.textContent = name; 
    fragment.appendChild(li); 
} 
//now you add all the nodes in once 
const container = document.getElementById('friendsList'); 
container.appendChild(fragment); 

Answer 4

var friendsList = document.getElementById('friendsList'); 
 
var names = ["John","Mike","George"]; 
 
names.forEach(function (name) { 
 
    var li = document.createElement('li'); 
 
    li.innerHTML = name; 
 
    friendsList.appendChild(li); 
 
});

Answer 5

// using Es6 
 
let names = ['john','jane','smith']; 
 
names.forEach((name)=>{ 
 
let li = document.createElement('li'); 
 
li.innerText = name; 
 
document.getElementById('friendsList').appendChild(li); 
 
})

<ul id="friendsList"></ul>