【JavaScript】HTMLの操作~要素を書き換え・挿入・削除~

JavaScript

JavaScriptを使って、HTML要素を動的に操作することで、ページの内容を自由に変更することができます。新しい要素を挿入したり、既存の要素を削除・移動したりすることで、よりインタラクティブなWebページを作成することが可能です。この記事では、要素の書き換え、挿入、削除の基本的な操作について解説します。

新しい要素を特定の場所に挿入する

新しい要素を特定の場所に挿入するには、`appendChild()`、`insertBefore()`、`insertAdjacentElement()`などのメソッドを使用します。これらのメソッドを使うことで、新しく作成した要素を指定した場所に挿入できます。

例: 要素の挿入

let newElement = document.createElement("div");
newElement.textContent = "新しい要素です";

// 例1: 末尾に挿入する
let container = document.getElementById("container");
container.appendChild(newElement);

// 例2: 指定した要素の前に挿入する
let referenceElement = document.getElementById("reference");
container.insertBefore(newElement, referenceElement);

// 例3: 特定の位置に挿入する
container.insertAdjacentElement("beforeend", newElement);

insertAdjacentElement()を使用すると、次の4つの位置に要素を挿入できます。

  • "beforebegin": 開始タグの前
  • "afterbegin": 開始タグの後
  • "beforeend": 終了タグの前
  • "afterend": 終了タグの後

要素を削除する

既存の要素を削除するには、remove()メソッドまたは親要素からremoveChild()メソッドを使います。これにより、DOMツリーから指定した要素を取り除くことができます。

例: 要素の削除

let elementToRemove = document.getElementById("removeThis");

// 例1: 直接削除する
elementToRemove.remove();

// 例2: 親要素から削除する
let parentElement = elementToRemove.parentNode;
parentElement.removeChild(elementToRemove);

子要素を丸ごと書き換える

親要素内のすべての子要素を新しい内容に書き換えるには、innerHTMLtextContentを使います。これにより、指定した要素の子要素を一括で書き換えることが可能です。

例: 子要素の書き換え

let container = document.getElementById("container");

// 例1: 新しいHTMLを挿入して書き換える
container.innerHTML = "<p>新しいコンテンツです</p>";

// 例2: テキストのみを挿入して書き換える
container.textContent = "新しいテキストコンテンツです";

innerHTMLはHTML構造を保持したまま書き換えることができますが、textContentは純粋なテキストのみを扱います。

要素オブジェクトを作成する

新しい要素を作成するには、document.createElement()メソッドを使用します。作成した要素は、その後DOMに追加したり、属性や内容を設定したりすることができます。

例: 新しい要素の作成と属性設定

let newDiv = document.createElement("div");
newDiv.textContent = "動的に作成された要素です";
newDiv.setAttribute("class", "dynamic-element");

let container = document.getElementById("container");
container.appendChild(newDiv);

この方法で、任意のHTML要素を作成してページに追加することができます。

既存の要素を移動する

既存の要素を別の場所に移動するには、appendChild()insertBefore()を使います。要素を移動する際、DOMツリー内でその要素が再配置されます。

例: 要素の移動

let elementToMove = document.getElementById("moveMe");
let newContainer = document.getElementById("newContainer");

// 例1: 末尾に移動する
newContainer.appendChild(elementToMove);

// 例2: 指定した要素の前に移動する
let referenceElement = document.getElementById("reference");
newContainer.insertBefore(elementToMove, referenceElement);

移動した要素は、もともと存在していた場所から取り除かれ、新しい位置に追加されます。

まとめ

JavaScriptを使ったDOM操作により、HTML要素を動的に挿入、削除、書き換えることができます。これらの基本的な操作を理解し活用することで、より柔軟でインタラクティブなWebページを作成することが可能です。要素の作成や移動、削除などを効果的に組み合わせて、豊かなユーザー体験を提供しましょう。

           

お仕事・当サイトへ興味を持っていただいた方
お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san」の中の人。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
「Webサステナビリティ・Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

JavaScript
スポンサーリンク
ma-sanをフォローする
ma-san blog
タイトルとURLをコピーしました