Dynamically add li to ul javascript

Question

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

Icbm

Answer 1

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>

Confutation

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

Answer 2

Try below example - use appendChild on your UL, which you will get using 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>

Kabuki

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

Answer 3

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

If you want to insert nodes there are different ways:

one of the solution is to use the method appendChild on the parent node.

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

Lex

Answer 4

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

Belgravia

Answer 5

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

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

See:

• document.createElement
• Object.assign
• Element#append

Belshazzar

I like your suggestion to use Object.assign. Is it possible to chain and for example create a child <img> within <li> element? Something like Object.assign(document.createElement('li'), { appendChild: Object.assign(document.createElement('img') ... ? – Lucubration

@Ωmega Unfortunately, there isn't a good way to add children while having the expression still evaluate to the element. An anonymous arrow function that is immediately invoked could be used to keep it in one line though. – Belshazzar

Answer 6

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

Artieartifact

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