將li動態添加到ul javascript

Question

我有一個名字數組，我想在我的頁面上顯示它們。 我在我的 html 中創建了一個空的 ul

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

現在我想將名稱添加到這個 ol 但我不起作用

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

錯誤：用戶回調引發異常。 類型錯誤：li.parentElement 不是函數

Answer 1

你必須將你的li附加到ul 。 這個document.createElement('li', name); 不會工作。

句法

document.createElement(tagName[, options]);

tagName ：指定要創建的元素類型的字符串。

options （可選）：一個可選的 ElementCreationOptions 對象，包含一個名為 is 的屬性，其值為之前使用customElements.define()定義的自定義元素的標簽名稱。

document.createElement() 文檔

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

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

Answer 2

Node.parentElement是只讀屬性（即，如果您想檢查給定節點的父節點）

如果要插入節點，有不同的方法：

解決方案之一是在父節點上使用方法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 3

嘗試以下示例 - 在您的 UL 上使用appendChild ，您將使用getElementById()獲得它：

 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 4

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

Answer 5

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