Question

我正在网站上创建“照片”页面。它使用PHP检索目录中的文件名，然后尝试使用javascript以编程方式创建div（其中包含图像）。但是，当我尝试创建“ w3-third” div时，请编辑innerHTML，使其嵌入图像，然后（将其添加到“ w3-row” div中）（有问题的步骤），将其删除。因此，每行只有一张图像。

我一直在寻找替代代码/解决方案，但是element.appendChild（）函数似乎是唯一的方法。我已经尝试了element.children.push（），但是element.children是[HTMLCollection]，（我猜）是只读的。

$.getJSON("content/photospage/get_filenames.php", function(data){
    var photoFileNames = data;
    console.log(photoFileNames.length + " images to display.");
    var photosDiv = document.getElementById("divPhotos");
    for(var i = 0; i < photoFileNames.length; i += 3){
      console.log("Loop! i=" + i);
      var newRow = document.createElement("div");
      newRow.classList.add("w3-row");
      newRow.classList.add("w3-padding-8")

      var newImg1 = newImg2 = newImg3 = document.createElement("div");

      newImg1.classList.add("w3-third")
      newImg2.classList.add("w3-third")
      newImg3.classList.add("w3-third")

      newImg1.innerHTML = "<img src='" + dir + photoFileNames[i] + "' class='w3-round w3-margin-bottom constrained'>";
      newRow.appendChild(newImg1);
      console.log("displayed img " + (i))
      if(i+1 < photoFileNames.length){
        newImg2.innerHTML = "<img src='" + dir + photoFileNames[i+1] + "' class='w3-round w3-margin-bottom constrained'>";
        newRow.appendChild(newImg2);
        console.log("displayed img " + (i+1))
      }
      if(i+2 < photoFileNames.length){
        newImg3.innerHTML = "<img src='" + dir + photoFileNames[i+2] + "' class='w3-round w3-margin-bottom constrained'>";
        newRow.appendChild(newImg3);
        console.log("displayed img " + (i+2))
      }

      console.log(newRow.children);

      photosDiv.appendChild(newRow);
    }

默认存在的html元素：

<div class="w3-container w3-content w3-center w3-padding-32 " id="divPhotos">
</div>

很抱歉，上面有大量代码。感谢您的协助，我很乐意澄清我未能提及的任何事情。：）

此外，我知道该代码笨拙且效率低下，所以请告诉我您是否可以采取我可以做得更好的任何事情。再次感谢！：）

Answer 1

使用

var newImg1 = newImg2 = newImg3 = document.createElement("div");

您已在内存中创建了一个对象（一个HTMLDivElement），其中有3个变量名（newImg1，newImg2，newImg3）参考。您没有3个单独的元素。当您使用元素之一调用appendChild时，会将其从DOM中先前存在的位置删除。

由于您需要单独的元素，因此应该明确地这样做：

var newImg1 = document.createElement("div");
var newImg2 = document.createElement("div");
var newImg3 = document.createElement("div");

通过使用另一个for循环而不是创建单独的独立元素，可以减少代码的重复性：

for (let j = 0; j < 3; j++) {
  const thisIndex = i + j;
  if (thisIndex >= photoFileNames.length) {
    break;
  }
  const img = document.createElement("div");
  img.innerHTML =  "<img src='" + dir + photoFileNames[thisIndex] + "' class='w3-round w3-margin-bottom constrained'>";
  newRow.appendChild(img);
}

element.appendChild（）提供意外结果：删除现有子项

1 个答案: