JavaScriptでのHTML要素とは？追加・削除・置換・コピーの操作方法についてご紹介
- システム
エンジニア - JavaScriptでHTML要素のどのような部分を編集できるのですか。
- プロジェクト
マネージャー - 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.
- システム
エンジニア - よく分かりました。HTML要素の追加、削除、置換、コピーのソースコードを自分でも書いてみます。
- プロジェクト
マネージャー - ご紹介したソースコードを参考にご自分でもソースコードを書いてみてください。
まとめ
いかがでしたでしょうか。JavaScriptでのHTML要素の編集方法について説明しました。HTML要素の追加・削除・置換・コピーについて、ソースコードを交えて紹介しました。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
jQueryでのDatepickerの主な使い方6選｜その他のできること
Datepickerとは？ jQueryでのDatepickerについて紹介します。Datepickerを使えば、シンプルなコードでカレンダーUIを生成することができます。また、様々なオプションがあり、カスタマイズが可能 […]
-
jQueryを利用したsetTimeoutを紹介！setIntervalとは
JavaScriptのsetTimeoutとは？ setTimeoutとは、指定した秒数だけ処理の実行を遅らせることのできるJavaScriptのメソッドです。通常、JavaScriptの処理は上から順に実行されますが、 […]
-
JavaScriptのスクリプトエラーの種類とその対策｜エラーハンドリング
JavaScriptのスクリプトエラーの種類とその対策を紹介します！ 今回は、JavaScriptのスクリプトエラー（ReferenceError／RangeError／SyntaxError／TypeError）の種類 […]
-
JavaScriptのifについて初歩から解説！if文の基本的な使い方から応用について紹介
JavaScriptのifとは？ JavaScriptのif文はプログラミングの基本です。JavaScript以外のほとんどのプログラミング言語にもif文はあるので、if文を知ることがプログラミングの第一歩と言えるでしょ […]
-
JavaScriptのconsole.logとは？console.logの使い方を基本から解説します！
console.logとは？ console.logはJavaScriptのコマンドです。その名前の通りにコンソールにログを出力する機能があります。デバッグをする上で必須の機能と言えるでしょう。使い方はscriptタグ内 […]
