Question

如果我有fragment = document.createDocumentFragment()
内部有一些随机的Dom，我希望得到整个HTML（在常规元素中类似innerHTML或在document.documentElement.innerHTML对象中document。

经过一些文本操作（通过正则表达式）后，将HTML返回到fragment 我怎样才能做到这一点？

Answer 1

我最终得到了那个丑陋的解决方案：

        var helperDiv = document.createElement('div');
        helperDiv.appendChild(fragment)
        var innerHTML = helperDiv.innerHTML.replace(someRegExp,()=>values())
        helperDiv.innerHTML = innerHTML;
        var len = helperDiv.children.length;
        while(len--){
            fragment.appendChild( helperDiv.firstChild );
        }

所以我赞赏一种更好的方式

2017年更新

我使用Range提供了更好的解决方案。

function fragmentInnerHTML(fragment, callback){
  var range = new Range();
  var helperDiv = document.createElement('div');
  helperDiv.appendChild(fragment);
  helperDiv.innerHTML = callback( helperDiv.innerHTML) 
  range.selectNodeContents(helperDiv);
  fragment.append( range.extractContents() );
  range.detach();
}

fragmentInnerHTML( fr, html => html.replace(/test(\d)/g,'test-$1') );

如果需要，可以将

编辑为更少的行

演示：https://jsfiddle.net/vtssq8jz/26/

Answer 2

我偶然发现了类似的问题，看看这是否可以帮到你：

var $frag = new DocumentFragment();
var html = '' ; 
[].forEach.call($frag.children, function(el) { 
  html += el.outerHTML;
});

基本上遍历文档片段的children属性并连接其元素的outerHTML。：）

Answer 3

如果f是一个documentFragment，则可以使用以下方法检索其innerHTML：

console.log([].map.call(f.children, e => e.outerHTML).join('\n'));

请注意，map不是f.children的方法。结果，以下代码不起作用：

console.log(f.children.map(e => e.outerHTML).join('\n'));

Answer 4

我之前遇到过这种问题，我得出的结论是，当文档片段具有单个顶级节点时，它更容易使用。考虑到这一点，我可能会在文档片段中使用一个已知的“容器”元素，然后设置并检索它的innerHTML。

这样的事情：

var fragment = document.createDocumentFragment(); //Initialise the fragment
fragment.appendChild(document.createElement('div')); //Create a top-level container element.
fragment.firstChild.innerHTML = 'Your chunk of DOM'; // Set the contents of your fragment, either with innerHTML, or by appending the child node.

console.log(fragment.firstChild.innerHTML); //Use any normal DOM node method to access the contents.

基本上，您总是使用fragment.firstChild来访问片段的内容，因此您可以访问所有DOM节点的常用方法。

Answer 5

我发现element.childNodes的方法是forEach

所以我们可以用它来清洁一下体验

 var $frag = new DocumentFragment();
 var html = '' ; 
 $frag.childNodes.forEach( function(el) { 
   html += el.outerHTML;
 });

或EC6短路

const innerHTML = [...$frag.childNodes].map( n=> n.outerHTML ).join('\n')

如何从HTMLFragment中获取整个HTML（如innerHTML）

5 个答案:

2017年更新