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>

Answer 2

问题

• <template> 的内容必须被克隆

  const copy = template.content.cloneNode(true)
  

  cloneNode(param) 的参数是一个布尔值——true 将克隆目标标签的所有后代标签。

• ids 必须是唯一的，否则 HTML 无效。此外，操作 DOM（如 OP）的 JavaScript/jQuery 将中断。将类分配给重复的标签并使用.querySelector() 来引用它们。

  const image = copy.querySelector('.image');
  

• 克隆和引用模板内容并在循环中分配克隆属性

  for (let url of list) {
    const copy = template.content.cloneNode(true);
    const image = copy.querySelector('.image');
    image.src = url;
    document.body.appendChild(copy);
  }
  

  始终将 DOM 修改为任何流程的最后一步。尽管主要与大型应用程序相关，但在 DOM 中删除、添加、变异、遍历等任何内容时，性能受到的影响最大。修改未附加到 DOM 的标签时，内存和处理时间成本更低（例如image.src = url; 然后document.body.appendChild(copy);）

const list = ["https://via.placeholder.com/50", "https://via.placeholder.com/75", "https://via.placeholder.com/100", "https://via.placeholder.com/125"];

function imgGrid(array) {
  const grid = document.querySelector(".grid");
  const template = document.querySelector(".temp");

  for (let url of array) {
    const item = template.content.cloneNode(true);
    item.querySelector('.image').src = url;
    item.querySelector('.link').href = url;
    grid.appendChild(item);
  }
}

imgGrid(list);

.grid {
  display: flex;
  flex-wrap: wrap;
  max-width: 100vw
}

.item {
  text-align: center;
  width: fit-content;
}

<section class="grid"></section>

<template class="temp">
  <figure class="item">
  <img src="" class="image">
  <figcaption>
    <a href="" class="link">Download</a>
  </figcaption>
  </figure>
</template>