.net column
.NET開発者のためのブログメディア

JavaScriptでのappendChildの扱い方とは?Fragmentを使用した複数要素の一括追加についても解説!

 
JavaScriptでのappendChildの扱い方とは?Fragmentを使用した複数要素の一括追加についても解説!
基本情報技術者試験の試験対策はこちら>>
SE
JavaScriptでのappendChildの使い方について教えてくれませんか。
PM
わかりました。それでは、JavaScriptでのappendChildについてご紹介しましょう。

JavaScriptでのappendChildの使い方とは?

今回は、JavaScriptでのappendChildの使い方について説明します。
appendChildを使用すると、親要素のもつ子要素の最後の要素に追加できます。動的に要素を追加する場合などに使用されます。

JavaScriptでのappendChildの使い方に興味のある方はぜひご覧ください。

基本的な使い方

appendChildの基本的な使い方を紹介します。HTMLは以下のように記述します。

JavaScriptは以下のように記述します。

実行結果は以下のようになります。

See the Pen
appendChild1
by kskumd (@kskumd)
on CodePen.


getElementByIdで親要素を取得し、appendChildで親要素のもつ子要素の末尾に追加します。

複数要素の一括追加

appendChildで複数要素を一括追加する方法を紹介します。document.createDocumentFragment()を使用します。HTMLは以下のように記述します。

JavaScriptは以下のように記述します。

実行結果は以下のようになります。

See the Pen
appendChild2
by kskumd (@kskumd)
on CodePen.


FragmentをappendChildすることで、要素の一括追加ができます。

ボタンイベントで要素追加

応用編として、ボタンイベントで要素追加を紹介します。HTMLは以下のように記述します。

JavaScriptは以下のように記述します。

実行結果は以下のようになります。

See the Pen
appendChild3
by kskumd (@kskumd)
on CodePen.


「appendChild」ボタンをクリックするたびに、要素が追加されることが分かります。

先頭に要素追加

appendChildは、親要素のもつ子要素の末尾に要素を追加する関数でした。先頭に追加するには、insertBeforeを紹介します。HTMLは以下のように記述します。

JavaScriptは以下のように記述します。

実行結果は以下のようになります。

See the Pen
appendChild4
by kskumd (@kskumd)
on CodePen.


SE
appendChildを使用すると複数要素の一括追加したり、ボタンイベントで要素追加したりできるのですね。
PM
その通りです。Fragmentを使用すれば、複数要素を一括追加することもできますので、活用してください。

まとめ

いかがでしたでしょうか。JavaScriptでのappendChildの使い方について説明しました。
appendChildを使用すると、親要素のもつ子要素の最後の要素に追加できます。Fragmentを使用すれば、複数要素を一括追加することもできます。

ぜひご自身でソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags