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

Question

我有以下数组:

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

我想要实现的是拥有一个带有图像名称的 anchor (列表项内部)的无序列表。我已完成以下操作:

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

Cannot create multiple list items in javascript

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

imageitem = document.createElement('li')

...然后使用它:

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

首先在哪里附加 anchorTag到li ，然后立即将其移至uploadsList (因为 appendChild 返回附加的节点，而不是您调用它的节点)。对于 anchor 也是如此，您重复使用一个 anchor ，而不是为每个图像创建一个 anchor 。

您需要创建 li并锚定在循环中，并附加 li ，不是 anchor :

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

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

<ul></ul>

请注意，我替换了 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);
});

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

<ul></ul>

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

<小时/>

请注意，我更改了名称 anchorTag至anchor 。元素不是标签。标签是我们在 HTML 中以文本方式定义元素的方式。 <a>和</a>是标签(分别是开始标签和结束标签)； a是一个元素。