Question

我想使用模板创建几个使用JSON数据的元素，方法是创建模板的克隆并将它们附加到特定的div。

但是，当使用克隆的模板变量时，克隆不能在处理JSON数据的函数内使用，即使这个克隆位于函数之上（这应该使它对于同一级别的所有内容都是全局的？）。

HTML

<template class="content">
  <h2>Hello World</h2>
  <h3>Hello World</h3>
</template>

<div class="box">

</div>

JS

let content = document.querySelector(".content").content;
let box = document.querySelector(".box");

doStuff();

function doStuff() {
  let content = document.querySelector(".content").content;
  let box = document.querySelector(".box");
  //make a clone of the template
  let clone = content.cloneNode(true);

  // change content of H2
  clone.querySelector("h2").textContent = "First Box";

  // change content of H3 with data fetched from API
  fetch("http://kea-alt-del.dk/t5/api/product?id=21").then(e => e.json()).then(productJson => otherStuff(productJson));

  function otherStuff(productJson) {
    clone.querySelector("h3").textContent = productJson.name;

  }

  // add the clone to the box div
  box.appendChild(clone);

}

工作小提琴例如：https://jsfiddle.net/c1x98hmh/4/ 我们可以在结果中看到h2含量已经改变，但是，h3保持不变。控制台日志告诉我克隆为空。

当我们将模板元素更改为div时，该示例的工作原理是什么？（我需要这个用于Json，这就是为什么我有模板，函数，克隆和内部函数）

Answer 1

clone是 DocumentFragment 对象。 Here's what appendChild does with a DocumentFragment：

如果给定子项是DocumentFragment，则DocumentFragment的全部内容将移动到指定父节点的子列表中。

关键字被“移动” - 这就是clone在调用otherStuff时为空的原因。

Answer 2

我的猜测是，由于浏览器不会呈现<template>元素，因此其内容不是DOM的一部分，因此无法使用{{1}等DOM查询进行查询}}

编辑：此处已确认：https://www.html5rocks.com/en/tutorials/webcomponents/template/

内容被视为不在文档中。在主页面中使用document.querySelector()或document.getElementById()不会返回模板的子节点。

JavaScript - 使用cloneNode和Json数据克隆模板

2 个答案: