问题

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将克隆所有目标标签的后代标签。
标识必须唯一，否则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>

JavaScript appendChild替换旧的Child

2 个答案:

问题