.NET開発者のためのブログメディア
JavaScriptでのHTML要素とは？追加・削除・置換・コピーの操作方法についてご紹介
- SE
- JavaScriptでHTML要素のどのような部分を編集できるのですか。
- PM
- JavaScriptでは、HTML要素の追加・削除・置換・コピーなどが行えます。
目次
JavaScriptでのHTML要素の編集方法とは？
今回は、JavaScriptでのHTML要素の編集方法について説明します。ここでは、HTML要素の追加・削除・置換・コピーについて、ソースコードを交えて紹介します。
JavaScriptでのHTML要素の編集方法に興味のある方はぜひご覧ください。
追加
JavaScriptでHTML要素を追加する方法を紹介します。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
11
12
13
14
15
16
17
|
// 親要素の取得
var parent = document.getElementById('parent');
// appendChild用の子要素を作成
var child1 = document.createElement('li');
child1.id = "appendChild";
child1.innerText = "appendChild";
// insertBefore用の子要素を作成
var child2 = document.createElement('li');
child2.id = "insertBefore";
child2.innerText = "insertBefore";
// appendChildで末尾に追加
parent.appendChild(child1);
// insertBeforeで先頭に追加
parent.insertBefore(child2, parent.firstElementChild);
|
実行結果は以下のようになります。
See the Pen
JavaScript_HTML1 by kskumd (@kskumd)
on CodePen.
削除
JavaScriptでHTML要素を削除する方法を紹介します。removeメソッドやremoveChildメソッド、parentNode.removeメソッドを使用します。
HTMLは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<ui id="parent1">
<li id="child11">child11</li>
<li id="child12">child12</li>
<li id="child13">child13</li>
</ui>
<hr>
<ui id="parent2">
<li id="child21">child21</li>
<li id="child22">child22</li>
<li id="child23">child23</li>
</ui>
<hr>
<ui id="parent3">
<li id="child31">child31</li>
<li id="child32">child32</li>
<li id="child33">child33</li>
</ui>
|
JavaScriptは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
|
// 指定したHTML要素を削除(remove())
var target1 = document.getElementById('child13');
target1.remove();
// 指定したHTML要素の子要素を削除(removeChild())
var target2 = document.getElementById('parent2');
target2.removeChild(target2.firstElementChild);
// 指定したHTML要素の親要素を削除(parentNode.remove())
var target3 = document.getElementById('child32');
target3.parentNode.remove();
|
実行結果は以下のようになります。
See the Pen
JavaScript_HTML2 by kskumd (@kskumd)
on CodePen.
置換（書き換え）
JavaScriptでHTML要素を置換する方法を紹介します。innerTextメソッドを使用します。
HTMLは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<ui id="parent1">
<li id="child11">child11</li>
<li id="child12">child12</li>
<li id="child13">child13</li>
</ui>
<hr>
<ui id="parent2">
<li id="child21">child21</li>
<li id="child22">child22</li>
<li id="child23">child23</li>
</ui>
|
JavaScriptは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// 指定したHTML要素を書き換え
var target1 = document.getElementById('child13');
target1.innerText = "new child13";
// 指定したHTML要素の子要素を書き換え
var target2 = document.getElementById('parent2');
var children = target2.children;
// 要素数の取得
var len = children.length;
// for文ですべて置換
for (var i = 0; i < len; i++){
// innerTextをreplaceで置換
children[i].innerText = children[i].innerText.replace("child", "new child");
}
|
実行結果は以下のようになります。
See the Pen
JavaScript_HTML3 by kskumd (@kskumd)
on CodePen.
コピー
JavaScriptでHTML要素をコピーする方法を紹介します。ここではcloneNodeを使用しています。
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
|
// コピーするHTML要素を取得
var parent = document.getElementById("parent");
// 要素のコピー
var clone_element = parent.cloneNode(true);
// コピーした要素のidを編集
clone_element.id = "parent2";
// コピーした要素の子要素を編集
var li_element = clone_element.querySelectorAll("li");
for (var i = 0; i < li_element.length; i++) {
// 要素のテキストコンテンツを設定
li_element[i].textContent = 'copied child' + (i+1);
}
// コピーしたHTML要素をページを追加
parent.after(clone_element);
|
実行結果は以下のようになります。
See the Pen
JavaScript_HTML4 by kskumd (@kskumd)
on CodePen.
- SE
- よく分かりました。HTML要素の追加、削除、置換、コピーのソースコードを自分でも書いてみます。
- PM
- ご紹介したソースコードを参考にご自分でもソースコードを書いてみてください。
まとめ
いかがでしたでしょうか。JavaScriptでのHTML要素の編集方法について説明しました。HTML要素の追加・削除・置換・コピーについて、ソースコードを交えて紹介しました。
ぜひご自身でソースコードを書いて、理解を深めてください。
Search キーワード検索
Popular 人気の記事
-
【VB.NET入門】DataGridViewの使い方まとめ
公開: 更新:
reccomended おすすめ記事
-
【.NETが統合】.NET 5の概要と今後のリリース予定
公開: 更新:
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅)