JavaScript:将节点复制到 DocumentFragment

我认为 DocumentFragment 的全部意义在于能够在不接触 DOM 的情况下构建内容，直到它准备好。

鉴于 DocumentFragment 不支持 innerHTML ，它可能有点乏味。另一方面，一旦构建完成，片段本身就很容易将内容添加到现有的 DOM 节点中。

如果我创建了一个 div 而不将它添加到 DOM，我可以按照我喜欢的方式填充它，包括 innerHTML 。据我所知，它应该不会对性能产生额外的影响。

是否有一种简单的方法(即在一行左右)将现有 DOM 节点的内容复制到 DocumentFragment 中？该过程如下所示:

var div=document.createElement('div');
var fragment=document.createDocumentFragment();
div.innerHTML='…';
//  copy contents to fragment
//  etc

这样我就可以两全其美。

回答

以下是@KevBot 的答案，包含在示例中:

var divTest=document.querySelector('div#test');

var html='<p>One</p><p>Two</p>';
var fragment=document.createRange().createContextualFragment(html);

divTest.appendChild(fragment);

最佳答案

是的，您可以使用 document.createRange 方法轻松创建带有 HTML 字符串的片段。
document.createRange 返回一个 Range 对象，该对象有一个名为 createContextualFragment 的方法，它允许您仅从 HTML 获取片段。

function fragmentFromString(strHTML) {
  return document.createRange().createContextualFragment(strHTML);
}

let div = document.createElement('div');
div.innerHTML = '<p>Testing</p>';

let fragment = fragmentFromString(div.innerHTML);
console.log(fragment);

<div>
  <p>Random Content</p>
</div>

适用于所有主要浏览器和 IE11。

关于JavaScript:将节点复制到 DocumentFragment，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41774889/