使用appendChild添加<li>元素时图片集中于首个<li>的问题求助

嘿，我来帮你捋捋问题出在哪～你现在所有图片都堆在第一个<li>里，核心原因是你只创建了一个<li>元素，然后循环把所有图片都塞进去了，自然就挤在一起啦！另外代码里还有几个语法小问题，我帮你一步步修正：

问题点拆解 #

1. 数组定义错误：你用了{}（对象语法）来存图片列表，但应该用[]数组，而且图片文件名是字符串，必须加引号，不然会直接报错。
2. 重复操作同一个<li>：循环里每次都获取同一个id="imageList"的<li>，然后往里面加图片，所有图片自然都堆在这一个里。
3. HTML属性未加引号：比如class= rsox这种写法不符合规范，容易引发意外问题，建议给属性值加上双引号。

修正后的代码（推荐用DOM创建方式，更可靠） #

// 先创建外层的ul元素，设置类名和样式
var outerUl = document.createElement("UL");
outerUl.className = "rsox";
outerUl.style.listStyleType = "none";
document.getElementById('sele').appendChild(outerUl);

// 正确定义图片数组，每个文件名都是带引号的字符串
var imageList = ["image1.jpg", "image2.jpg", "image3.jpg"];

// 循环遍历每个图片，创建对应的<li>和<img>
for (var i = 0; i < imageList.length; i++) {
  // 为当前图片创建一个新的<li>
  var liItem = document.createElement("LI");
  liItem.className = "images";
  
  // 创建<img>元素，设置类名和图片地址
  var imgElement = document.createElement("IMG");
  imgElement.className = "imageClass";
  imgElement.src = `https://www.WEB-SITE-NAME.com/${imageList[i]}`;
  
  // 把图片放进<li>，再把<li>放进外层的ul
  liItem.appendChild(imgElement);
  outerUl.appendChild(liItem);
}

更简洁的innerHTML写法（用模板字符串） #

如果习惯用innerHTML拼接，也可以这样写，代码更短：

// 创建外层ul
var outerUl = document.createElement("UL");
outerUl.className = "rsox";
outerUl.style.listStyleType = "none";

var imageList = ["image1.jpg", "image2.jpg", "image3.jpg"];
// 循环拼接每个<li>的HTML字符串
var liHtmlContent = "";
imageList.forEach(imgName => {
  liHtmlContent += `<li class="images"><img class="imageClass" src="https://www.WEB-SITE-NAME.com/${imgName}"></li>`;
});

// 把拼接好的<li>们放进ul，再添加到页面
outerUl.innerHTML = liHtmlContent;
document.getElementById('sele').appendChild(outerUl);

额外提醒 #

要确保你的页面上存在一个id="sele"的元素哦，不然document.getElementById('sele')会返回null，导致后续代码无法执行～

内容的提问来源于stack exchange，提问作者TAG