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
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>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>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);
// 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>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:
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') ... ?
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);
});