Create a dynamic element inside of another dynamic element with Javascript

Question

Imagine there is an array with photos, and we want to create a list that shows all of them:

photoOptions = ["Blue.jpg", "Red.jpg", "Green.jpg"]

Here's the code that I have currently:

photoOptions = ["Red.jpg", "Blue.jpg", "Green.jpg"]
var thumbnailList = document.getElementById('product-options');
var elem = document.createElement("img");
var listItem = document.createElement("li").appendChild(elem)
var clone;
photoOptions.forEach(function(item, index) {
  elem.src = 'http://placehold.it/100?text=' + index;
  clone = listItem.cloneNode();
  thumbnailList.appendChild(clone);
});

<ul id="product-options"></ul>

It creates the ul I want, but instead of the <img>'s living inside of an <li>, they are just listed as <img> elements with no parent <li>. What can I do to make the code return a <ul> with <li>'s that each contain a <img> tag?

TbWill4321 · Accepted Answer · 2015-10-14 18:57:12Z

1

The reason is that your var listItem is being set to the return value of appendChild, not to the li element. Also, you need to deep clone in order to copy your image element as well.

photoOptions = ["Red.jpg", "Blue.jpg", "Green.jpg"]
var thumbnailList = document.getElementById('product-options');
var elem = document.createElement("img");
var listItem = document.createElement("li");
listItem.appendChild(elem)
var clone;
photoOptions.forEach(function(item, index) {
  elem.src = 'http://placehold.it/100?text=' + index;
  clone = listItem.cloneNode(true);
  thumbnailList.appendChild(clone);
});

<ul id="product-options"></ul>

Also, it looks like placehold.it doesn't like text=0, not sure why.

answered Oct 14, 2015 at 18:57

TbWill4321

8,6863 gold badges30 silver badges25 bronze badges

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

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

The answer has to do with object references. Let me explain what the code is doing:

var listItem = document.createElement("li").appendChild(elem)

The right-hand expression here evaluates to the IMG element. Because the "equals" assignment operator assigns the value of the expression document.createElement("li").appendChild(elem) to listItem. The expression evaluates the createElement method, then the appendChild method, and "returns" that last method's return value.

According to MDN's Node.appendChild() spec, "The returned value is the appended child." So, after this line, listItem points to the IMG element.

  clone = listItem.cloneNode();
  thumbnailList.appendChild(clone);

Then, here, the IMG element is cloned and added to the UL.

Solution:

Make listItem reference the LI instead of the IMG:

var listItem = document.createElement("li");
listItem.appendChild(elem);

This code results in listItem pointing to the LI element, and also an IMG is appended to the LI without returning itself to listItem.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 14, 2015 at 18:59

Matthias

15.8k9 gold badges51 silver badges66 bronze badges

1 Comment

Matthias Over a year ago

P.S. Debugging your code with breakpoints would have shown you this error super quickly.

Collectives™ on Stack Overflow

Create a dynamic element inside of another dynamic element with Javascript

2 Answers 2

Comments

Solution:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Solution:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related