1分でわかるdocument.createDocumentFragment()

createDocumentFragmentとは

複数のノードをまとめて扱うNodeの一種。

使い方

document.createDocumentFragment()を入れた変数を作成してappendChildでノードを追加していく。

var cdf = document.createDocumentFragment();

var h1 = document.createElement("h1");
h1.appendChild(document.createTextNode('見出し'));

var div = document.createElement("div");
div.appendChild(document.createTextNode('いろいろ入ります'));

var p = document.createElement("p");
p.appendChild(document.createTextNode('サンプルの文章'));

cdf.appendChild(h1);
cdf.appendChild(div);
cdf.appendChild(p);

document.getElementById('r').appendChild(cdf);

createDocumentFragmentのサンプル

関連した記事

JavaScriptのDOMでのtableタグ構築最適解 Firebase Realtime DatabaseとCloud Firestoreの設定方法と使い方 JavaScriptだけでスワイプ処理追加でカルーセル(スライダー)作成 Twitterツイートボタン吹き出しカウンターリンク作成方法