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