将 li 动态添加到 ul javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47951287/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically add li to ul javascript
提问by Junius L.
I have an array of names and I want to show them on my page. I created an empty ul in my html
我有一个名字数组，我想在我的页面上显示它们。我在我的 html 中创建了一个空的 ul
<ul id="friendsList">
</ul>
And now I want to add the names to this ol but I doesn't work
现在我想将名称添加到这个 ol 但我不起作用
for (var i = 0; i < names.length; i++) {
var name = names[i];
var li = document.createElement('li', name);
li.parentElement('friendsList');
}
Error: Exception was thrown by user callback. TypeError: li.parentElement is not a function
错误：用户回调引发了异常。类型错误：li.parentElement 不是函数
回答by Junius L.
You have to append your lito ul. This document.createElement('li', name);won't work.
你必须将你的附加li到ul. 这document.createElement('li', name);行不通。
Syntax
句法
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().
tagName：指定要创建的元素类型的字符串。
options（可选）：一个可选的 ElementCreationOptions 对象，包含一个名为 is 的属性，其值为之前使用
customElements.define().
document.createElement() documentation
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>回答by mike_t
Try below example - use appendChildon your UL, which you will get using getElementById():
尝试以下示例 -appendChild在您的 UL 上使用，您将使用它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>回答by laurent
Node.parentElementis a read only property (ie if you want to inspect the parent node of a given node)
Node.parentElement是只读属性（即，如果您想检查给定节点的父节点）
If you want to insert nodes there are different ways:
如果要插入节点，有不同的方法：
one of the solution is to use the method appendChildon the parent node.
解决方案之一是在父节点上使用方法appendChild。
If you want to avoid a reflow (the browser redraws the frame) one every insertion you can first 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);
回答by vicky patel
// 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>回答by tetta
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);
});