JavaScript的appendChild替换旧的Child

Question

我正在尝试使用 javascript 制作带有下载按钮的图像网格，将它们放入 html 中。

我尝试了 insertBefore。

var list = ["https://via.placeholder.com/50", "https://via.placeholder.com/75", "https://via.placeholder.com/100", "https://via.placeholder.com/125"];
var template, item, item1, item2, fin, i, target, ta;
template = document.getElementById("item");
item = template.content.getElementById("grid-itm");
item1 = template.content.getElementById("imgtit");
item2 = template.content.getElementById("linktit");
target = document.getElementById("gc");
for (i = 0; i < list.length; i++) {
  target = document.getElementById("gc");
  ta = list[i];
  item1.src = ta;
  item2.href = ta;
  item.appendChild(item1);
  item.appendChild(item2);
  target.appendChild(item);
}

<template id="item">
  <div class="grid-item" id="grid-itm">
  </div>
  <img src="" id="imgtit">
  <a href="" id="linktit"><p>Download</p></a>
</template>
<div class="grid-container" id="gc"></div>

.grid-container 中应该是我的所有图片，但它只是列表中的最后一张。

Answer 1

在循环开始之前，您只需为 item 变量赋值一次，当您使用 DOM 中已有的元素调用 appendChild 时，它将从其中删除它以前就存在过。在循环内，克隆元素(并删除它们的 ID，因为单个文档中的重复 ID 是无效的 HTML):

const list = ["IMG_20190704_133046.jpg", "IMG_201810055.jpg", "DSCN0994.JPG", "IMG_20181104_160735.jpg", "IMG_201810054.jpg", "IMG_20181007_152306.jpg", "IMG_20180721_210459.jpg", "PANO_20180719_202625-01.jpeg", "IMG_20180719_200505.jpg"];
const target = document.getElementById("gc");
const template = document.querySelector('#item');
for (let i = 0; i < list.length; i++) {
  const [div, img, a] = [...template.content.children].map(node => node.cloneNode());
  const src = "imgs/" + list[i];
  img.src = src;
  a.href = src;
  div.appendChild(img);
  div.appendChild(a);
  target.appendChild(div);
}

const list = ["IMG_20190704_133046.jpg", "IMG_201810055.jpg", "DSCN0994.JPG", "IMG_20181104_160735.jpg", "IMG_201810054.jpg", "IMG_20181007_152306.jpg", "IMG_20180721_210459.jpg", "PANO_20180719_202625-01.jpeg", "IMG_20180719_200505.jpg"];
    const target = document.getElementById("gc");
    const template = document.querySelector('#item');
    for (let i = 0; i < list.length; i++) {
      const [div, img, a] = [...template.content.children].map(node => node.cloneNode());
      const src = "imgs/" + list[i];
      img.src = src;
      a.href = src;
      div.appendChild(img);
      div.appendChild(a);
      target.appendChild(div);
    }

<template id="item">
  <div class="grid-item">

  </div>
  <img>
  <a><p>Download</p></a>
</template>

<div id="gc"></div>