动态将li添加到ul javascript [英] Dynamically add li to ul javascript

问题描述

我有一个名称数组，我想在页面上显示它们.我在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');} 

错误:用户回调引发异常.TypeError:li.parentElement不是函数

解决方案

您必须将 li 附加到 ul .此 document.createElement('li'，name); 无效.

语法

  document.createElement(tagName [，options]); 

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

选项(可选):可选的ElementCreationOptions对象，包含一个名为is的属性，其值是先前使用 customElements.define()定义的自定义元素的标签名称.

document.createElement()文档

 变量名称= ['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>  

I have an array of names and I want to show them on my page. I created an empty ul in my html

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

And now I want to add the names to this ol but I doesn't work

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

解决方案

You have to append your li to ul. This document.createElement('li', name); won't work.

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().

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>

这篇关于动态将li添加到ul javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！