appendChild <LI> 和图像匹配 <LI> 元素的问题

Question

我想要 3 个 li 元素，在这些 li 元素中我想要 1 个图像。

所有图像都进入第一个 li 元素而不是展开。

任何建议将不胜感激......

我已经试过了，但它不起作用..

///////////CODE/////////////////

var node = document.createElement("LI");

node.innerHTML =
    "<ul class= rsox style=list-style-type: none>" +
    "<li class=images id=imageList>" +
    "</li>" +
    "</ul>";


document.getElementById('sele').appendChild(node);

var image = { image1.jpg, image2.jpg, image3.jpg };

   for (i = 0; i < image.length; i++) {

    container = document.getElementById ("imageList");



container.innerHTML += "<img class= imageClass src=https://www.WEB-SITE-NAME.com/" + image[i] + ">"
   }

Answer 1

您的代码确实不干净，我想我知道您想要实现什么，所以这是我修复代码的尝试：

var images = ["image1.jpg", "image2.jpg", "image3.jpg"];

var node = document.createElement("li"};

node.className = "rsox" ;
node.style.listStyleType = "none";

for (var i = 0; i < images.length; i++) {
  var listItem = document.createElement("li");
  listItem.className = "images";
  var img = document.createElement("img");
  img.className = "imageClass";
  img.alt = "";
  img.src = "https://www.WEB-SITE-NAME.com/" + images[i];
  listItem.appendChild(img);
  node.appendChild(listItem);
}

document.getElementById("sele").appendChild(node);

我没有对此进行测试，所以如果您遇到任何错误或其他问题，请告诉我。