Question

26

Dynamically add li to ul javascript

rated 0 times [ 30] [ 4] / answers: 1 / hits: 41819 / 7 Years ago, sat, december 23, 2017, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dusty

Add To Favorites

Follow

Total Points: 739

Total Questions: 97

Total Answers: 85

Location: Angola

Member since Wed, Apr 13, 2022

2 Years ago

dusty questions

1 js fetch post works, but php is empty

Mon, Dec 14, 20, 00:00, 4 Years ago

1 Nested function component ReactJS

Mon, Mar 23, 20, 00:00, 4 Years ago

1 React Native - How do we know what child element is contained by parent?

Mon, Mar 16, 20, 00:00, 4 Years ago

1 Postman : How to assert all array elements exist in other array?

Fri, Jul 12, 19, 00:00, 5 Years ago

1 How to fix this error Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'div.com[min=]' is not a valid selector?

Thu, Jun 13, 19, 00:00, 5 Years ago

View All

answered 7 Years ago leifw · Accepted Answer

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>