个人中心
gpt4 book ai didi

Dynamically add li to ul javascript(动态添加li到ul JavaScript)

转载 作者：bug小助手 更新时间：2023-10-28 10:27:04 26 4
gpt4 key购买 nike



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

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


更多回答
优秀答案推荐

You have to append your li to 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().




document.createElement() documentation

文档.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>





Node.parentElement is a read only property (ie if you want to inspect the parent node of a given node)

parentElement是一个只读属性（即如果你想检查一个给定节点的父节点）



If you want to insert nodes there are different ways:

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



one of the solution is to use the method appendChild on 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);


Try below example - use appendChild on your UL, which you will get using getElementById():

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







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







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





You can set the textContent of the <li> and then append it to the <ul>.

您可以设置

  • 的extContent，然后将其附加到
      。 


    • const list = document.getElementById('friendsList');
    list.append(Object.assign(document.createElement('li'), {textContent: 'item text'}));

    See:

    请参见：



    更多回答

    This works, now I will try to figure it out with my code. Thx!

    这是可行的，现在我将尝试用我的代码来解决这个问题。谢谢！

    This works, now I will try to figure it out with my code. Thx!

    这是可行的，现在我将尝试用我的代码来解决这个问题。谢谢！

    This works, now I will try to figure it out with my code. Thx!

    这是可行的，现在我将尝试用我的代码来解决这个问题。谢谢！

    26 4 0
    文章推荐： Unity3d parsed Json file is printing Null values(Unity3d解析的Json文件正在打印可打印值)
    文章推荐： Does Excel-DNA support thread-safe RTD wrapper functions?(Excel-DNA是否支持线程安全的RTD包装函数？)
    文章推荐： Are `$` and `[[` equivalent when accessing elements of an S4 object?(当访问S4对象的元素时，`$`和`[[`等价吗？)
    文章推荐： Error after updating Blazor WASM Project - Conflicting assets with the same path '/wwwroot/_content(更新Blazor WASM项目后出错-具有相同路径‘/wwwroot/_content’的冲突资产)
    bug小助手
    个人简介

    我是一名优秀的程序员,十分优秀！

    作者热门文章
    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com