Answers + Discussion: Dynamically Create and Populate List Items


#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>`;

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

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

#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.


#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]'


#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: