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

如果我有

fragment=document.createDocumentFragment（）

里面有一些随机Dom，我想在常规元素中获取整个HTML（特别是

innerHTML

，或者

document.documentElement.innerHTML

在

document

对象中

在一些文本操作（通过正则表达式）之后，将HTML返回到

片段

---

我怎么能做到这一点呢？

我以前遇到过这种问题，我得出的结论是，当文档片段只有一个顶级节点时，它更容易使用。考虑到这一点，我可能会在文档片段中使用已知的“container”元素，然后设置并检索该文档片段的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节点的所有常用方法。

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

        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一些更新 我在

范围内提供了更好的解决方案

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') );

如果需要，可以编辑为更少的行

演示：
我偶然发现了类似的问题，看看这是否能帮助您：


var$frag=newdocumentfragment（）；
var html=''；
[]forEach.call（$frag.children，函数（el）{
html+=el.outerHTML；
})；
如果
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'));

我发现
element.childNodes
have是
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')

您尝试过什么吗？将片段添加到您创建的随机节点，然后将该节点复制到innerHTML。唉，片段对象本身不支持innerHTML、querySelector等。要重新添加更新的html字符串，请执行相反的操作。将字符串作为innerHTML添加到随机节点，然后将所有子节点复制到新片段。我发布了最终解决方案e nice的副本，但是如果您使用第一个
div
您从使用
documentFragment
中获得了什么好处。我使用它来在根目录中包含同级元素。并使用simple
div.appendChild（fragment）添加整个同级元素
pery激动地看到我偶然发现了你的答案！自从宿舍时代以来就没见过你！很好：）当你把我的注意力转向这里时，我更新了解决方案：）很好，可以写得更漂亮：
[…$frag.children].map（e=>e.innerHTML.join（'↵')
console.log（[…f.children].map（e=>e.outerHTML）.join（'\n'））；
确实有效。而且，不一定需要在换行时加入，只需执行
.join（''）
。这也更有意义，因为outerHTML通常是从浏览器生成的一个紧凑的、无空间的HTML字符串，也就是说，没有空间的不是开发人员编写的原始HTML。。