使 DOM 元素的内容成为文档片段之一

Question

我正在尝试将文档片段的内容插入到 DOM 元素中（纯 javascript）。工作原理是这样的：

var a = document.getElementById("a"),
    b = document.getElementById("b");

现在我使用模板元素将“a”的内容放入文档片段

var content = document.createElement("template");
content.innerHTML = a.innerHTML;
content = content.content.cloneNode(true);

现在我想用 content 的内容替换 b 的内容。我尝试了一个简单的 b.innerHTML = content.innerHTML;，但似乎如果文档片段没有 innerHTML 属性。
这可能吗？

注意：我知道这是完成 b.innerHTML = a.innerHTML 任务的完全无效的方法，但显然这只是我设法完成的更大任务的简化。

Answer 1

您需要创建“克隆”并通过使用模板内容属性然后您可以将 a 和 b 的 innerHTML 用于您的片段。

示例：

const a = document.getElementById("a"),
  b = document.getElementById("b");

// note template will only be parsed, to render it use js...

function initTemplate() {

  const container = document.getElementById("container");
  const template = document.getElementById("t");

  // create a first clone with the innerHTML of a...

  const firstClone = template.content.cloneNode(true);
  firstClone.textContent = a.innerHTML;

  // create a second clone with the innerHTML of b...

  const secondClone = template.content.cloneNode(true);
  secondClone.textContent = b.innerHTML;

  // append to the document

  container.appendChild(firstClone);
  container.appendChild(secondClone);


}

<p id="a">Paragraph A</p>
<p id="b">Paragraph B</p>
<button onclick="initTemplate()">Init Template</button>

<br>
<div id="container"></div>

<template id="t">
  
</template>

如果您想检查您的浏览器是否支持 HTML template element，请执行以下操作：

if ("content" in document.createElement("template") {

   // clone the elements as above and append them to the document

}

Mozilla Docs and Mozilla Docs

使 DOM 元素的内容成为文档片段之一

make a DOM element's content be the one of a document fragment

javascript

dom

documentfragment