将任意HTML插入到DocumentFragment中

Question

我知道adding innerHTML to document fragments最近已经讨论过了，并且希望能够看到DOM标准中的内容。但是，在此期间您应该使用哪种解决方法？

也就是说，采取

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

我想无论是div和span的frag内，有一个简单的一行代码。

没有循环的加分。 jQuery是允许的，但我已经试过$(html).appendTo(frag);之后frag仍为空。

Answer 1

这里是modern browsers的方式，而不循环：

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; 
} 

更新： 我发现用皮特的主要思想，这增加了IE11进来一个简单的方法：

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

覆盖率比<template>方法IE11，章好，测试OK ，FF。

现场测试/演示提供http://pagedemos.com/str2fragment/

Answer 2

要做到这一点尽可能少线，你可以将你的内容包裹在另一个div，所以你不必循环或调用appendchild不止一次。使用jQuery（正如你所提到的那样）你可以很快地创建一个未连接的dom节点并将其放入片段中。

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

Answer 3

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 4

当前，仅使用字符串填充文档片段的唯一方法是创建一个临时对象，并循环通过子对象以追加他们到了片段。

• 由于它没有附加到文档中，因此不会呈现任何内容，因此没有性能影响。
• 你看到一个循环，但它只是循环通过第一个孩子。大多数文件只有一些半根元素，所以这也不是什么大不了的事情。

如果要创建整个文档，请改为使用DOMParser。看看this answer。

代码：

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 5

使用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); 

注意，这种方法和<template>方法之间的主要区别是：

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

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

Answer 6

@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 7

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 8

就像@dandavis说的那样，使用模板标签有一个标准的方法。
但是，如果你想支持IE11，你需要解析像“< TD>考”表元素，您可以使用此功能：

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 9

这里是一个X浏览器解决方案，在IE10，IE11测试，Edge，Chrome和FF。

function HTML2DocumentFragment(markup: string) { 
     if (markup.toLowerCase().trim().indexOf('<!doctype') === 0) { 
      let doc = document.implementation.createHTMLDocument(""); 
      doc.documentElement.innerHTML = markup; 
      return doc; 
     } else if ('content' in document.createElement('template')) { 
      // Template tag exists! 
      let el = document.createElement('template'); 
      el.innerHTML = markup; 
      return el.content; 
     } else { 
      // Template tag doesn't exist! 
      var docfrag = document.createDocumentFragment(); 
      let el = document.createElement('body'); 
      el.innerHTML = markup; 
      for (let i = 0; 0 < el.childNodes.length;) { 
       docfrag.appendChild(el.childNodes[i]); 
      } 
      return docfrag; 
     } 
    }