Question

我认为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);

Answer 1

您可以创建一个<template>元素，它是一个文档片段;设置.innerHTML元素的template，并使用.innerHTML属性获取template元素.content

var template = document.createElement("template");
var div = document.createElement("div");
div.innerHTML = "<p>abc</p>";
template.innerHTML = div.innerHTML;
document.body.appendChild(template.content);

Answer 2

是的，您可以使用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。

Answer 3

您可以使用appendChild将新元素添加到片段中。

var div=document.createElement('div');
var fragment=document.createDocumentFragment();
div.innerHTML='…';

fragment.appendChild(div);

如果您只想将元素的内容注入片段，那么您可以遍历childNodes并将它们插入到片段中。

div.childNodes.forEach(function(node) {
    fragment.appendChild(node);
});

Answer 4

尝试这些尺寸

text = frag.appendChild( document.createTextNode( "insert text here" ) )

或

text = frag.appendChild( document.createTextNode( div.innerHTML ) )

或

text = frag.appendChild( document.createTextNode( div.textContent ) )

text变量将保留textnode，同时您还将textnode全部添加到一行

JavaScript：将节点复制到DocumentFragment

4 个答案: