JavaScript：DocumentFragmentにノードをコピーする

Question

DocumentFragmentのポイントは、準備が整うまでDOMに触れることなくコンテンツを構築できることです。

DocumentFragmentがinnerHTMLをサポートしていないとすれば、ちょっと面倒なことがあります。一方、一度構築されると、断片自体によって既存のDOMノードにコンテンツを追加するのは簡単です。

divをDOMに追加せずに作成した場合は、innerHTMLなど、好きなように設定することができます。私が知る限り、パフォーマンスには何の影響もありません。

既存のDOMノードの内容をDocumentFragmentにコピーする簡単な方法（つまり1行程度）はありますか？プロセスは次のようになります。

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

.contentプロパティを使用してtemplate要素の.innerHTMLを取得はい、あなたは簡単にdocument.createRangeメソッドを使用してHTMLの文字列を使用してフラグメントを作成することができます。

document.createRangeはオブジェクトを返します。このオブジェクトには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 2

あなたがフラグメントに新しい要素を追加するために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 3

サイズのためにこれらを試してみてください

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

または

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

または

あなたはまた、すべてのtextnodeを付加しているが

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

がtext変数がtextnodeを開催します1行に

Answer 4

文書の一部である<template>要素を作成できます。 .innerHTMLtemplateの要素を設定し、

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