动态添加li到ul javascript

Question

我有一系列名字，我想在我的页面上显示它们。我在html中创建了一个空ul

<ul id="friendsList">
</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不是函数

Answer 1

你必须将你的li附加到ul。这document.createElement('li', name);将无法正常工作。

句法

document.createElement(tagName[, options]);

tagName：一个字符串，指定要创建的元素的类型。

options（可选）：包含名为is的单个属性的可选ElementCreationOptions对象，其值是先前使用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

尝试以下示例 - 在您的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 3

Node.parentElement是一个只读属性（即，如果要检查给定节点的父节点）

如果要插入节点，则有不同的方法：

其中一个解决方案是在父节点上使用appendChild方法。

如果你想避免重排（浏览器重绘框架）每次插入你可以先insert your elements in a document fragment

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>