javascript - 是否可以使用 vanilla js 将 XML 注入 DOM？

Question

我正在做一个编码评估，我们使用 HTML、CSS 和 vanilla JS（没有 jQuery）制作简单的响应式照片库。其中一项任务是在单击时全屏显示照片。我找到了一种简单的方法，其中包含一个输入元素并根据它是否被单击来更改状态。我现在的问题是在我获取和映射图片时包含输入标签。

这是我通过响应获取图片和地图的地方：

const getPics = async () => {
  try {
    const res = await fetch('http://localhost:8887/data/photos.json');
    const pics = await res.json();
    pics.map((pic) => {
      let image = document.createElement('img');
      image.src = pic.urls.small;
      image.id = pic.id;
      image.onclick = function () {
        zoom(image.id);
      };
      document.querySelector('.gallery').appendChild(image);
    });
  } catch (error) {
    console.log(error);
  }
};

这给我留下了一个看起来像这样的画廊：

但是，我想在我的图像上方添加一个输入元素和一个包装它的标签元素，如下所示：

input[type=checkbox] {
  display: none;
}

.container img {
  margin: 100px;
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

input[type=checkbox]:checked ~ label > img {
  transform: scale(2);
  cursor: zoom-out;
}

<div class="container">
  <input type="checkbox" id="zoomCheck">
  <label for="zoomCheck">
    <img src="https://via.placeholder.com/200">
  </label>
</div>

当我映射来自我的 fetch 请求的响应数据时，如何将这两个元素添加到 DOM？是否可以使用模板文字将所有内容作为 XML 注入？我试图这样做，但没有运气：

const getPics = async () => {
  try {
    const res = await fetch('http://localhost:8887/data/photos.json');
    const pics = await res.json();
    pics.map((pic) => {
    let img = `
      <input type="checkbox" id="zoomCheck">
        <label for="zoomCheck">
        <img src=${pic.urls.small} id=${pics.id}>
      </label>`
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(img,"text/xml");
      document.querySelector('.gallery').appendChild(img);
    });
  } catch (error) {
    console.log(error);
  }
};
Anyone have any advice as to how I could achieve this? Again, it has to be using vanilla JS

标签： javascriptxml