将任意 HTML 插入 DocumentFragment

Question

我知道最近将 innerHTML 添加到文档片段讨论过，并有望包含在 DOM 标准中。但是，您同时应该使用什么解决方法？

也就是说，

var html = '<div>x</div><span>y</span>';
var frag = document.createDocumentFragment();

我想要 frag 内部的 div 和 span，并使用简单的一行代码。

无循环的奖励积分。允许使用 jQuery，但我已经尝试过 $(html).appendTo(frag);之后 frag 仍然是空的。

Answer 1

这是现代浏览器中的一种无需循环的方法：

var temp = document.createElement('template');
temp.innerHTML = '<div>x</div><span>y</span>';

var frag = temp.content;

或者作为可重复使用的

function fragmentFromString(strHTML) {
    var temp = document.createElement('template');
    temp.innerHTML = strHTML;
    return temp.content;
}

更新：
我找到了一种更简单的方法来使用 Pete 的主要思想，它将 IE11 添加到混合中：

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

覆盖范围比

提供实时测试/演示http://pagedemos.com/str2fragment/

Answer 2

目前，仅使用字符串填充文档片段的唯一方法是创建一个临时对象，并循环遍历子对象以将它们附加到片段中。

• 由于它没有附加到文档中，因此不会呈现任何内容，因此不会影响性能。
• 您会看到一个循环，但它仅循环第一个子级。大多数文档只有几个半根元素，因此这也没什么大不了的。

如果您想创建整个文档，请使用 DOMParser。看看这个答案。

代码：

var frag = document.createDocumentFragment(),
    tmp = document.createElement('body'), child;
tmp.innerHTML = '<div>x</div><span>y</span>';
while (child = tmp.firstElementChild) {
    frag.appendChild(child);
}

一行（两行以提高可读性）（输入：String html，输出：DocumentFragment frag）：

var frag =document.createDocumentFragment(), t=document.createElement('body'), c;
t.innerHTML = html; while(c=t.firstElementChild) frag.appendChild(c);

Answer 3

使用 Range.createContextualFragment：

var html = '<div>x</div><span>y</span>';
var range = document.createRange();
// or whatever context the fragment is to be evaluated in.
var parseContext = document.body; 
range.selectNodeContents(parseContext);
var fragment = range.createContextualFragment(html);

请注意，此方法与 < code>

• Range.createContextualFragment 得到更广泛的支持（IE11 刚刚获得它，Safari、Chrome 和 FF 已经拥有它一段时间了） while)。

• HTML 中的自定义元素将立即随范围升级，但前提是使用模板克隆到真实文档中。模板方法有点“惰性”，这可能是可取的。

Answer 4

没有人提供所要求的“简单的一句话”。

给定变量…………

var html = '<div>x</div><span>y</span>';
var frag = document.createDocumentFragment();

下面的行就可以解决问题（在 Firefox 67.0.4 中）：

frag.append(...new DOMParser().parseFromString(html, "text/html").body.childNodes);

Answer 5

@PAEz 指出@RobW 的方法不包括元素之间的文本。这是因为 children 只获取元素，而不是节点。更可靠的方法可能如下：

var fragment = document.createDocumentFragment(),
    intermediateContainer = document.createElement('div');

intermediateContainer.innerHTML = "Wubba<div>Lubba</div>Dub<span>Dub</span>";

while (intermediateContainer.childNodes.length > 0) {
    fragment.appendChild(intermediateContainer.childNodes[0]);
}

在较大的 HTML 块上性能可能会受到影响，但是它与许多旧版浏览器兼容并且简洁。

Answer 6

createDocumentFragment 创建一个空的 DOM“容器”。 innerHtml 和其他方法仅适用于 DOM 节点（而不是容器），因此您必须首先创建节点，然后将它们添加到片段中。您可以使用一种痛苦的appendChild 方法来完成此操作，也可以创建一个节点并修改它的innerHtml 并将其添加到您的片段中。

var frag = document.createDocumentFragment();
    var html = '<div>x</div><span>y</span>';
var holder = document.createElement("div")
holder.innerHTML = html
frag.appendChild(holder)

使用 jquery，您只需将 html 保留并构建为字符串即可。如果你想将它转换为 jquery 对象以对其执行类似 jquery 的操作，只需执行 $(html) 即可在内存中创建一个 jquery 对象。准备好附加它后，您只需将其附加到页面上的现有元素即可

Answer 7

就像 @dandavis 所说，有一个使用模板标签的标准方法。
但是如果你想支持IE11并且需要解析像'test'这样的表格元素，你可以使用这个函数：

function createFragment(html){
    var tmpl = document.createElement('template');
    tmpl.innerHTML = html;
    if (tmpl.content == void 0){ // ie11
        var fragment = document.createDocumentFragment();
        var isTableEl = /^[^\S]*?<(t(?:head|body|foot|r|d|h))/i.test(html);
        tmpl.innerHTML = isTableEl ? '<table>'+html : html;
        var els        = isTableEl ? tmpl.querySelector(RegExp.$1).parentNode.childNodes : tmpl.childNodes;
        while(els[0]) fragment.appendChild(els[0]);
        return fragment;
    }
    return tmpl.content;
}

Answer 8

我会选择这样的东西..

function fragmentFromString(html) {
  const range = new Range();
  const template = range.createContextualFragment(html);
  range.selectNode(template.firstElementChild);
  return range;
}

// Append to body
// document.body.append(fragmentFromString(`<div>a</div>`).cloneContents())

通过这种方式，您可以将内容保存在 Range 对象内，并且可以免费获得所有需要的方法。

您可以在此处找到所有 Range 方法和属性的列表 https:// developer.mozilla.org/en-US/docs/Web/API/Range

注意：完成后记得使用 detatch() 方法以避免泄漏并提高性能。

Answer 9

这是一个 x 浏览器解决方案，在 IE10、IE11、Edge、Chrome 和 FF 上进行了测试。

 function HTML2DocumentFragment(markup: string) {
        if (markup.toLowerCase().trim().indexOf('




Answer 10

var html = '<div>x</div><span>y</span>';
var frag = document.createDocumentFragment();
var e = document.createElement('i');
frag.appendChild(e);
e.insertAdjacentHTML('afterend', html);
frag.removeChild(e);

Answer 11

要使用尽可能少的行来完成此操作，您可以将上面的内容包装在另一个 div 中，这样您就不必多次循环或调用appendchild。使用 jQuery（正如您所提到的，是允许的）您可以非常快速地创建一个独立的 dom 节点并将其放置在片段中。

var html = '<div id="main"><div>x</div><span>y</span></div>';
var frag = document.createDocumentFragment();
frag.appendChild($​(html)[0]);