解决方案：

Question

想象一下，有一个包含照片的数组，我们想要创建一个显示所有照片的列表：

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

这是我目前的代码：

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>

它会创建我想要的ul，但不会生成<img>内的<li>，而是列为<img>元素而没有父{ {1}}。我该怎么做才能使代码返回<li> <ul>，每个<li>包含<img>个标记？

Answer 1

原因是您的var listItem被设置为appendChild的返回值，而不是li元素。此外，您还需要深度克隆以复制图像元素。

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>

此外，它看起来像placehold.it不喜欢text=0，不知道为什么。

Answer 2

答案与对象引用有关。让我解释一下代码在做什么：

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

此处的右侧表达式评估IMG元素。因为＆＃34;等于＆＃34;赋值运算符将表达式document.createElement("li").appendChild(elem)的值分配给listItem。表达式评估createElement方法，然后评估appendChild方法，＆＃34;返回＆＃34;最后一个方法的返回值。

根据MDN＆＃39; Node.appendChild()规范，＆＃34;返回的值是附加的子项。＆＃34;因此，在此行之后，listItem指向IMG元素。

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

然后，在此，克隆IMG元素并将其添加到UL。

解决方案：

让listItem引用LI而不是IMG：

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

此代码导致listItem指向LI元素，并且IMG也附加到LI而不将其自身返回到listItem。

使用Javascript在另一个动态元素内创建动态元素

2 个答案:

解决方案：