无法在javascript中创建多个列表项

Question

我有以下数组：

["uploads-1462948491987.png", "uploads-1462948492004.png"]

我想要实现的是具有图像名称的锚点（内部列表项）的无序列表。我做了以下事情：

var uploadsList = document.querySelector('ul'),
    imageitem = document.createElement('li'),
    anchorTag = document.createElement('a');

anchorTag.setAttribute('href',"#");

var imagesNamesString = "<%= uploads %>";
var imageNames = imagesNamesString.split(',');


imageNames.forEach(function(image) {
    anchorTag.innerHTML = image;
    uploadsList.appendChild(imageitem.appendChild(anchorTag));
});

console.log(imageNames);

问题是，最后一张图片是唯一出现在列表中的图片，可能是什么造成的？提前谢谢。

Answer 1

  

无法在javascript中创建多个列表项

因为您没有创建多个列表项。你正在创建一个：

imageitem = document.createElement('li')

...然后使用它：

uploadsList.appendChild(imageitem.appendChild(anchorTag));

首先将anchorTag附加到li，然后立即将其移至uploadsList（因为appendChild会返回附加的节点，而不是您在其上调用的节点）。对于锚点而言，您可以重复使用一个，而不是为每个图像创建一个。

您需要在循环中创建li并锚定，并附加li，而不是锚点：

imageNames.forEach(function(image) {
    var li = document.createElement('li');
    var anchor = document.createElement('a');
    anchor.href = "#"; // No need for `setAttribute
    anchor.appendChild(document.createTextNode(image));
    li.appendChild(anchor);
    uploadsList.appendChild(li);
});

＆＃13;

＆＃13;

var imageNames = ["uploads-1462948491987.png", "uploads-1462948492004.png"];

var uploadsList = document.querySelector('ul');

imageNames.forEach(function(image) {
  var li = document.createElement('li');
  var anchor = document.createElement('a');
  anchor.href = "#"; // No need for `setAttribute
  anchor.appendChild(document.createTextNode(image));
  li.appendChild(anchor);
  uploadsList.appendChild(li);
});

document.body.appendChild(uploadsList);

＆＃13;

<ul></ul>

＆＃13;

＆＃13;

＆＃13;

请注意，我将innerHTML替换为：

anchor.appendChild(document.createTextNode(image));

您可能不想将图片名称解释为HTML。但如果你这样做，只需将其改回：

anchor.innerHTML = image;

或那时，真的，只是

imageNames.forEach(function(image) {
    var li = document.createElement('li');
    li.innerHTML = "<a href='#'>" + image + "</a>";
    uploadsList.appendChild(li);
});

＆＃13;

＆＃13;

var imageNames = ["uploads-1462948491987.png", "uploads-1462948492004.png"];

var uploadsList = document.querySelector('ul');

imageNames.forEach(function(image) {
    var li = document.createElement('li');
    li.innerHTML = "<a href='#'>" + image + "</a>";
    uploadsList.appendChild(li);
});

document.body.appendChild(uploadsList);

＆＃13;

<ul></ul>

＆＃13;

＆＃13;

＆＃13;

但我建议不要将图像名称视为HTML（除非您实际将HTML放入其中）。

请注意，我将名称anchorTag更改为anchor。元素不是标记。标签是我们在HTML中以文本方式定义元素的方式。 <a>和</a>是标记（分别为开始标记和结束标记）; a是一个元素。