Display an html ordered list of array items?

Question

I have the list displaying, but not displaying in an HTML ordered list. I know I somehow need to create a <li> element and attach it to the array. I don't know how to attach the array of items to a <li> element. Here is my code thus far.

let toDos = ['walk cat', 'pet fish'];
let listItems;

for (let i = 0; i < toDos.length; i++) {
    let displayListItems = document.createElement('li');
    listItems = toDos[i];
    listContainer.append(listItems);
}

I don't understand what you want, it will display in whatever order you list the data in the toDos list. If you're storing the data externally you'll want to attach it by some id you can use to insert it back in the same order. — Kwright02
– Kwright02, Commented Jun 7, 2021 at 3:06

DecPK · Accepted Answer · 2021-06-07 03:09:57Z

2

You just need to create a list item using document.createElement('li') as you are creating
Add it's text using textContent
Append the listItem using appendChild or append.

const listContainer = document.querySelector("ol");

let toDos = ['walk cat', 'pet fish'];
let listItems;

for (let i = 0; i < toDos.length; i++) {
  let displayListItems = document.createElement('li');
  listItems = toDos[i];
  displayListItems.textContent = listItems;
  listContainer.append(displayListItems);
}

<ol></ol>

edited Jun 7, 2021 at 3:09

answered Jun 7, 2021 at 3:08

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StephenW Over a year ago

@AlirezaAhmadi Much appreciated.

Alireza Ahmadi · Accepted Answer · 2021-06-07 05:45:59Z

1

You have three options to do that: innerText or innerHTML or textContent.

const listContainer = document.querySelector("ol");

let toDos = ['walk cat', 'pet fish'];
let listItems;

for (let i = 0; i < toDos.length; i++) {
    let displayListItems = document.createElement('li');
    listItems = toDos[i];
    displayListItems.innerHTML = listItems;
    //displayListItems.innerText = listItems; //or this one
    //displayListItems.textContent = listItems; //or this one
    
    listContainer.append(displayListItems);
}

<ol></ol>

And notice that listContainer.append(listItems); is incorrect and you have to append displayListItems.

answered Jun 7, 2021 at 5:45

Alireza Ahmadi

10.2k8 gold badges28 silver badges66 bronze badges

Collectives™ on Stack Overflow

Display an html ordered list of array items?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related