JavaScriptでのHTML要素とは？追加・削除・置換・コピーの操作方法についてご紹介

Javascript
プログラミング言語

公開日時: 2021-09-08 　更新日時: 2022-06-06

JavaScriptでのHTML要素とは？追加・削除・置換・コピーの操作方法についてご紹介

この記事でわかること

システム エンジニア: JavaScriptでHTML要素のどのような部分を編集できるのですか。

プロジェクト マネージャー: JavaScriptでは、HTML要素の追加・削除・置換・コピーなどが行えます。

JavaScriptでのHTML要素の編集方法とは？

今回は、JavaScriptでのHTML要素の編集方法について説明します。ここでは、HTML要素の追加・削除・置換・コピーについて、ソースコードを交えて紹介します。

JavaScriptでのHTML要素の編集方法に興味のある方はぜひご覧ください。

追加

JavaScriptでHTML要素を追加する方法を紹介します。appendChildメソッドやinsertBeforeを使用します。
HTMLは以下のように記述します。

<ui id="parent">
  <li id="child1">child1</li>
  <li id="child2">child2</li>
  <li id="child3">child3</li>
</ui>

<li id="child1">child1</li>

<li id="child2">child2</li>

<li id="child3">child3</li>

</ui>

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

// 親要素の取得
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);

// 親要素の取得

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は以下のように記述します。

<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>

<li id="child11">child11</li>

<li id="child12">child12</li>

<li id="child13">child13</li>

</ui>

<hr>

<li id="child21">child21</li>

<li id="child22">child22</li>

<li id="child23">child23</li>

</ui>

<hr>

<li id="child31">child31</li>

<li id="child32">child32</li>

<li id="child33">child33</li>

</ui>

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

// 指定した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();

// 指定した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は以下のように記述します。

<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>

<li id="child11">child11</li>

<li id="child12">child12</li>

<li id="child13">child13</li>

</ui>

<hr>

<li id="child21">child21</li>

<li id="child22">child22</li>

<li id="child23">child23</li>

</ui>

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

// 指定した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");
}

// 指定した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は以下のように記述します。

<ui id="parent">
  <li id="child1">child1</li>
  <li id="child2">child2</li>
  <li id="child3">child3</li>
</ui>

<li id="child1">child1</li>

<li id="child2">child2</li>

<li id="child3">child3</li>

</ui>

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

// コピーする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);

// コピーする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。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScriptでのHTML要素とは？追加・削除・置換・コピーの操作方法についてご紹介

JavaScriptでのHTML要素の編集方法とは？

追加

削除

置換（書き換え）

コピー

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

JavaScriptでのHTML要素とは？追加・削除・置換・コピーの操作方法についてご紹介

JavaScriptでのHTML要素の編集方法とは？

追加

削除

置換（書き換え）

コピー

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

jQueryでのDatepickerの主な使い方6選｜その他のできること

jQueryを利用したsetTimeoutを紹介！setIntervalとは

JavaScriptのスクリプトエラーの種類とその対策｜エラーハンドリング

JavaScriptのifについて初歩から解説！if文の基本的な使い方から応用について紹介

JavaScriptのconsole.logとは？console.logの使い方を基本から解説します！