Создайте Html элемент LI с TextNode в одной строке и поместите их в элемент UL - PullRequest
Новая
       5

Создайте Html элемент LI с TextNode в одной строке и поместите их в элемент UL

0 голосов
/ 24 января 2020

Этот код не работает должным образом: 

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

Мой первый пост здесь, извините за что-то. =)

1 Ответ

0 голосов
/ 24 января 2020

Вы можете использовать .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>
...