使用TextNode在一行中创建HTML LI元素，并将其放在UL元素上

Question

此代码无法正常工作：

let ulElement = document.createElement('ul');
function create() {
    for (name of names) {
        ulElement.appendChild(document.createElement('li').appendChild(document.createTextNode(name)))
    }
    document.querySelector('#container').appendChild(ulElement)
}

这是生成的HTML代码：

<ul>
    "Diego"
    "Gabriel"
    "Lucas"
</ul>

虽然考虑到多行（如下行），但我想知道是否可以在一行中生成。

function createLI() {
    for (name of names) {
        var li = document.createElement('li')
        var textNode = document.createTextNode(name)
        li.appendChild(textNode)
        ulElement.appendChild(li)
    }
    document.querySelector('#container').appendChild(ulElement)
}

我在这里的第一篇文章，对不起。 =）

Answer 1

是的，可以在一行中完成这些类型的任务，但以后使调试/修改变得困难。

document.getElementById('banana').appendChild(
  document.createElement('li').appendChild( document.createTextNode( 'Hello World! A new LI element' ) )
);
			

<ul id='banana'></ul>

Answer 2

您可以使用.map()和模板文字。

people = ["Diego","Gabriel","Lucas"];

function createList(names) {
    document.querySelector('#container').innerHTML = `<ul>${people.map((name) => `<li>I am ${name}.</li>`).join('')}</ul>`;
}

createList(people);

<div id="container"></div>