JavaScriptでのappendChildの扱い方とは？Fragmentを使用した複数要素の一括追加についても解説！
- SE
- JavaScriptでのappendChildの使い方について教えてくれませんか。
- PM
- わかりました。それでは、JavaScriptでのappendChildについてご紹介しましょう。
JavaScriptでのappendChildの使い方とは？
今回は、JavaScriptでのappendChildの使い方について説明します。
appendChildを使用すると、親要素のもつ子要素の最後の要素に追加できます。動的に要素を追加する場合などに使用されます。
JavaScriptでのappendChildの使い方に興味のある方はぜひご覧ください。
基本的な使い方
appendChildの基本的な使い方を紹介します。HTMLは以下のように記述します。
|
1
2
3
4
5
|
<ui id="parent">
<li id="child1">child1</li>
<li id="child2">child2</li>
<li id="child3">child3</li>
</ui>
|
JavaScriptは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 親要素の取得
var parent = document.getElementById('parent');
// 子要素を作成
var child = document.createElement('li');
// id要素とinnerText要素を設定
child.id = "appendChild1";
child.innerText = "appendChild1";
// 子要素を末尾に追加
parent.appendChild(child);
|
実行結果は以下のようになります。
See the Pen
appendChild1 by kskumd (@kskumd)
on CodePen.
getElementByIdで親要素を取得し、appendChildで親要素のもつ子要素の末尾に追加します。
複数要素の一括追加
appendChildで複数要素を一括追加する方法を紹介します。document.createDocumentFragment()を使用します。HTMLは以下のように記述します。
|
1
2
3
4
5
|
<ui id="parent">
<li id="child1">child1</li>
<li id="child2">child2</li>
<li id="child3">child3</li>
</ui>
|
JavaScriptは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// fragmentの生成
var fragment = document.createDocumentFragment();
// 親要素の取得
var parent = document.getElementById('parent');
// 繰り返し処理
for ( var i = 1; i <= 5; i++ ) {
// 子要素を作成
var child = document.createElement('li');
// id要素とinnerText要素を設定
child.id = "appendChild" + i;
child.innerText = "appendChild" + i;
// fragmentに追加
fragment.appendChild(child);
}
// fragmentを追加(要素の一括追加)
parent.appendChild(fragment);
|
実行結果は以下のようになります。
See the Pen
appendChild2 by kskumd (@kskumd)
on CodePen.
FragmentをappendChildすることで、要素の一括追加ができます。
ボタンイベントで要素追加
応用編として、ボタンイベントで要素追加を紹介します。HTMLは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>appendChild sample</title>
</head>
<body>
<button type="button" class="btn btn-primary" onclick="addChildCreate()">appendChild</button>
<ui id="parent">
<li id="child1">child1</li>
<li id="child2">child2</li>
<li id="child3">child3</li>
</ui>
</body>
</html>
|
JavaScriptは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// 親要素の取得
var parent = document.getElementById("parent");
var idx = 1;
// 子要素を追加する関数
function addChildCreate() {
// 子要素を作成
var child = document.createElement("li");
// id要素とinnerText要素を設定
child.id = "appendChild" + idx;
child.innerText = "appendChild" + idx;
// インデックスのインクリメント
idx++;
// 子要素の追加
child = parent.appendChild(child);
}
|
実行結果は以下のようになります。
See the Pen
appendChild3 by kskumd (@kskumd)
on CodePen.
「appendChild」ボタンをクリックするたびに、要素が追加されることが分かります。
先頭に要素追加
appendChildは、親要素のもつ子要素の末尾に要素を追加する関数でした。先頭に追加するには、insertBeforeを紹介します。HTMLは以下のように記述します。
|
1
2
3
4
5
|
<ui id="parent">
<li id="child1">child1</li>
<li id="child2">child2</li>
<li id="child3">child3</li>
</ui>
|
JavaScriptは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
|
// 親要素の取得
var parent = document.getElementById('parent');
// 子要素を作成
var child = document.createElement('li');
child.id = "insertBefore1";
child.innerText = "insertBefore1";
// 子要素を先頭に追加
parent.insertBefore(child, parent.firstElementChild);
|
実行結果は以下のようになります。
See the Pen
appendChild4 by kskumd (@kskumd)
on CodePen.
- SE
- appendChildを使用すると複数要素の一括追加したり、ボタンイベントで要素追加したりできるのですね。
- PM
- その通りです。Fragmentを使用すれば、複数要素を一括追加することもできますので、活用してください。
まとめ
いかがでしたでしょうか。JavaScriptでのappendChildの使い方について説明しました。
appendChildを使用すると、親要素のもつ子要素の最後の要素に追加できます。Fragmentを使用すれば、複数要素を一括追加することもできます。
ぜひご自身でソースコードを書いて、理解を深めてください。
Search キーワード検索
Popular 人気の記事
-
【VB.NET入門】DataGridViewの使い方まとめ
公開: 更新:
reccomended おすすめ記事
-
【.NETが統合】.NET 5の概要と今後のリリース予定
公開: 更新:
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務
月給26万～26万円東京都千代田区(秋葉原駅) -
官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】
月給50万～60万円東京都府中市(中河原駅) -
官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】
月給25万～35万円東京都府中市(中河原駅) -
システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務
月給63万～63万円埼玉県川越市(南大塚駅)