HTML DOM createDocumentFragment（）メソッド
HTML DOM createDocumentFragment（）メソッドは、ドキュメントフラグメントの作成に使用されます。ドキュメントフラグメントはメモリ内にあるため、DOM構造には影響しません。ドキュメントフラグメントをDOMに追加すると、基本的にその子に置き換えられます。つまり、ドキュメントにドキュメントフラグメントが追加されることはなく、その子のみが追加されます。
構文
以下は、createDocumentFragment（）メソッドの構文です-
document.createDocumentFragment()
documentFragmentノードを表すDocumentFragmentオブジェクトを返します。
例
HTML DOM createDocumentFragment（）メソッドの例を見てみましょう-
<!DOCTYPE html>
<html>
<body>
<h1>createDocumentFragment() example</h1>
<p>Click the below button to change list items using the createDocumentFragment method.</p>
<button type="button" onclick="changeList()">CHANGE</button>
<ul>
<li>Mango</li>
<li>Peach</li>
<li>Guava<li>
<li>Strawberry</liv
<li>Papaya</li>
</ul>
<script>
function changeList() {
var x= document.createDocumentFragment();
x.appendChild(document.getElementsByTagName("LI")[0]);
x.childNodes[0].childNodes[0].nodeValue = "Watermelon";
document.getElementsByTagName("UL")[0].appendChild(x);
}
</script>
</body>
</html> 出力
これにより、次の出力が生成されます-
変更ボタンをクリックすると-
上記の例では-
5つのリストアイテムを含む順序なしリストを作成しました-
<ul> <li>Mango</li> <li>Peach</li> <li>Guava<li> <li>Strawberry</li> <li>Papaya</li> </ul>
次に、ユーザーがクリックしたときにchangeList（）メソッドを実行するCHANGEボタンを作成しました-
<button type="button" onclick="changeList()">CHANGE</button>
changeList（）関数は、ドキュメントオブジェクトのcreateDocumentFragment（）メソッドを使用してドキュメントフラグメントを作成し、それを変数xに割り当てます。 appnedChild（）メソッドを使用して、list要素をドキュメントフラグメントの子にします。ドキュメントフラグメント内の最初のリスト要素の値を「Watermelon」に設定します。次に、ドキュメントフラグメントを
の最後の子として追加します。function changeList() {
var x= document.createDocumentFragment();
x.appendChild(document.getElementsByTagName("LI")[0]);
x.childNodes[0].childNodes[0].nodeValue = "Watermelon";
document.getElementsByTagName("UL")[0].appendChild(x);
} -
HTML DOM writeln（）メソッド
HTML DOM writeln（）は、複数の式（HTMLまたはJavaScript）をドキュメントに直接書き込む機能をユーザーに提供します。 注 −このメソッドは、ドキュメント内のHTMLコードがある場合はそれを上書きし、新しい行に引数を追加します。 構文 以下は構文です- document.write(agruments) 例 HTML DOMドキュメントのwriteln（）メソッドの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>HTML DOM writeln()</title&g
-
HTML DOM write（）メソッド
HTML DOM write（）は、複数の式（HTMLまたはJavaScript）をドキュメントに直接書き込む機能をユーザーに提供します。 注 −このメソッドは、ドキュメント内のHTMLコードがある場合はそれを上書きし、新しい行に引数を追加しません。 構文 以下は構文です- document.write(arguments) 例 HTML DOMドキュメントのwrite（）メソッドの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>HTML DOM write()</title> &l