javascript - appendChild 的问题并让图像匹配元素

Question

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

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

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

我试过这个但它不起作用..

/////////////代码///////////////////

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] + ">"
   }

标签： javascriptinnerhtmlappendchild

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

我还没有测试过这个，所以如果你有任何错误或什么，请告诉我。