DOM

：

：

Document.createDocumentFragment() メソッド

　編集：2022.09.02 by T.A.

→、

新しい空の DocumentFragment を作成して返します。

後に文書に組み込む必要があります。

mdn： そこに DOM ノードを追加して画面外の DOM ツリーを作成します。

構文
Document.createDocumentFragment()
Document 実質 document でしょう。
返値

DocumentFragment。

使用上の注意

DocumentFragment は DOM の Node オブジェクトですが、メインの DOM ツリーの一部にはなりません。通常の使い方は、文書フラグメントを生成し、その文書フラグメントに要素を追加して、その文書フラグメントを DOM ツリーへ追加することです。DOM ツリー内では、文書フラグメントはすべての子要素によって置き換えられます。

文書フラグメントはメモリ内にあり、メインの DOM ツリーの一部ではないため、文書フラグメントに子要素を追加してもページのリフロー（要素の位置と大きさを決定するための計算）が行われません。そのため文書フラグメントを利用することによって、性能の改善が見込まれます。

DocumentFragment コンストラクターを使用して新しいフラグメントを生成することもできます。 

let fragment = new DocumentFragment();
例

この例では、主要なウェブブラウザのリストを DocumentFragment 内に作成し、表示するドキュメントに新しい DOM サブ･ツリーを追加しています。

HTML： 

<ul id="ul">
</ul>

JavaScript： 

var element  = document.getElementById('ul'); // ul が存在することを仮定
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera',
    'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
});

element.appendChild(fragment);

DocumentFragmentを作成し、SPAN要素の最後に組み込む。

HTML： 

始<SPAN id=IdSpan>[SPAN要素]</SPAN>終

JavaScript： 

F=document.createDocumentFragment();	//DocumentFragment オブジェクトの生成。
N=document.createElement('em');	//em要素の生成。
N.innerHTML="てすと<B>です</B>よ";	//em要素の内容にHTMLを記述。
F.appendChild(N);	//DocumentFragment にem要素ノードとして追加。
IdSpan.appendChild(F);	//SPAN要素の最後に DocumentFragment を組み込む。
D=IdSpan.innerHTML;	//＝[SPAN要素]<em>てすと<b>です</b>よ</em>
テスト