appendChild <LI>并具有图像匹配<LI>元素的问题

时间:2019-08-09 15:59:26

标签: javascript innerhtml appendchild

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

1 个答案:

答案 0 :(得分:0)

您的代码确实不干净,我想我知道您要实现的目标,因此,我在尝试修复您的代码时尝试:

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

我还没有测试过,所以如果您遇到任何错误或其他原因,请告诉我。