Answers + Discussion: Dynamically Create and Populate List Items

programming
1
This is the topic to discuss (and post answers) to the Dynamically Create and Populate List Items challenge: https://www.kirupa.com/html5/dynamically_create_populate_list.htm
2

My answer for this is pretty straightforward:

var toppings = ["Tomato", "Cheese", "Pepperoni", 
                "Olives", "Jalapenos", "Pineapple", "Ham"];

var ul = document.querySelector("ul");

for (var i = 0; i < toppings.length; i++) {
  var topping = toppings[i];

  var listItem = document.createElement("li");
  listItem.textContent = topping;

  ul.appendChild(listItem);
}
3

This assumes you put the script under the element you want to populate. Then uses innerHTML to set the contents.

    var scripts = document.getElementsByTagName('script');
    var currScript = scripts.item(scripts.length - 1);
    currScript.previousElementSibling.innerHTML = `<li>${toppings.join('</li><li>')}</li>`;
1 Like
4

I’ve meant to mention this a few times while visiting the forum. I don’t ever see the images that should accompany this and similar posts. When I inspect the broken image icon the dev console states that the images are not being loaded because they are mixed content, an http image source served over a https connection. Do others see the images?

5

A simple change to a “for of” loop iteration.

let listItem = document.querySelector("ul")
for (let value of toppings) {
 listValue = document.createElement("li");
 listValue.textContent = value;
 listItem.appendChild(listValue);
}
1 Like
6

No, I don’t. It’s one of those things I assumed was known to be broken and maybe being worked on…?

Posts like this usually have a clickable link to the article as well (this one has the link but it was not converted into an anchor) and is shown in a slightly different format which was unusual as well. I tend to depend on that link to see what the post is linked to.

Edit: I just noticed @kirupa edited the original post which I imagine broke the standard formatting normally seen with these linked posts. (Note: this doesn’t pertain to the broken images aspect, just the clickable link I mentioned on top of that.)

7

jQuery :stuck_out_tongue:

$('ul').append(toppings.map(t => $('<li>').text(t)));
2 Likes
8

That part of the forums has always been broken, and I haven’t looked into fixing it. It is something that gets auto-generated when a new article on the site gets posted. I’ll look into why the links aren’t working, though my preference is to not have the entirety of the content duplicated in the forums :stuck_out_tongue:

9

I agree. I’d rather there just be a link.

The broken links are from the path resolution being broken. It comes together as kirupa.comimages/… missing a “/” and the subdirectory (ies?) between the domain and images. In some cases its “/react/”, here its “/html5/” etc.

1 Like
10

var ul = document.querySelector(“ul”);
Is there any advantage to using this versus the following:
var ul=dcoument.getElementsByTagName(‘ul’)[0] ?

11

It’s more efficient. In more ways than one:

  • Shorter to write
  • Only needs to find the first match, not all other matches
  • Doesn’t require creation of an intermediary array to contain all matches
  • Doesn’t require the additional [0] lookup

You’re also not limited to tag names in querySelector. You can use any CSS selector, such as 'ul.myClass button[disabled]'

1 Like
12

Thanks for the explanation. I have not used querySelector much so I guess I’ll have to learn about it and start to use it more.

13

If you are looking for some additional resources around querySelector, this tutorial and video may help you out: https://www.kirupa.com/html5/finding_elements_dom_using_querySelector.htm

:slight_smile:

14

Thanks Kirupa. This is EXACTLY what I was looking for. I got your code working. If you could just explain how I can do the following 2 things I will have everything I need.

  1. How to identify which listview item was clicked
  2. Change the colour of the listview item on hover

Thanks

Paul

15

For your first question, this should help: https://www.kirupa.com/html5/handling_events_for_many_elements.htm Listen for the click event on the ul element and use the target property to figure out which list element triggered the click.

For the listview hover color, you can do something like this:

li:hover {
  background-color: #EEE;
}

:slight_smile:

16

Hi Kirupa,
I was practicing with your js list sample but, when I put the code on separate js file it wont work. It work fine on the Google Console. Do you know what Im missing?

17

Can you share your HTML and JS code? You can paste them here, select what you pasted, and click in the </> button in the toolbar to format them as code :grinning: