【JavaScript】HTMLの操作～コンテンツを書き換える～

JavaScriptを使って、HTMLのコンテンツを動的に書き換えることで、Webページによりインタラクティブな要素を追加することができます。このガイドでは、テキストコンテンツの挿入方法や、`insertAdjacentText()`メソッドを使った様々な位置へのテキスト挿入方法について解説します。

テキストコンテンツを挿入する

HTML要素のテキストコンテンツを書き換えるために、`textContent`プロパティを使用します。これにより、既存のテキストを新しいテキストに置き換えたり、要素内にテキストを追加したりできます。

let element = document.getElementById("myElement");
element.textContent = "新しいテキストコンテンツです";

この方法では、要素内のすべての既存のコンテンツが新しいテキストに置き換えられます。

insertAdjacentText()メソッド

insertAdjacentText()メソッドを使うと、指定した位置に新しいテキストを挿入することができます。このメソッドは、既存のコンテンツを保持しながら、新しいテキストを追加する際に便利です。

使い方

element.insertAdjacentText(position, text);

• position: テキストを挿入する位置を指定する文字列。次の4つの値を取ります。
  • "beforebegin": 開始タグのすぐ前
  • "afterbegin": 開始タグのすぐ後ろ
  • "beforeend": 終了タグのすぐ前
  • "afterend": 終了タグのすぐ後ろ
• text: 挿入するテキストコンテンツ。

開始タグのすぐ前に挿入する

beforebeginを使用すると、指定した要素の開始タグの直前にテキストを挿入できます。

let element = document.getElementById("myElement");
element.insertAdjacentText("beforebegin", "開始タグの前に挿入されたテキスト");

<!-- 挿入前 -->
<div id="myElement">内容</div>

<!-- 挿入後 -->
開始タグの前に挿入されたテキスト<div id="myElement">内容</div>

開始タグのすぐ後ろに挿入する

afterbeginを使用すると、指定した要素の開始タグの直後、つまり要素の最初の子としてテキストを挿入できます。

let element = document.getElementById("myElement");
element.insertAdjacentText("afterbegin", "開始タグの後ろに挿入されたテキスト");

<!-- 挿入前 -->
<div id="myElement">内容</div>

<!-- 挿入後 -->
<div id="myElement">開始タグの後ろに挿入されたテキスト内容</div>

終了タグのすぐ前に挿入する

beforeendを使用すると、指定した要素の終了タグの直前、つまり要素の最後の子としてテキストを挿入できます。

let element = document.getElementById("myElement");
element.insertAdjacentText("beforeend", "終了タグの前に挿入されたテキスト")

<!-- 挿入前 -->
<div id="myElement">内容</div>

<!-- 挿入後 -->
<div id="myElement">内容終了タグの前に挿入されたテキスト</div>

終了タグのすぐ後ろに挿入する

afterendを使用すると、指定した要素の終了タグの直後にテキストを挿入できます。

let element = document.getElementById("myElement");
element.insertAdjacentText("afterend", "終了タグの後ろに挿入されたテキスト");

<!-- 挿入前 -->
<div id="myElement">内容</div>

<!-- 挿入後 -->
<div id="myElement">内容</div>終了タグの後ろに挿入されたテキスト

まとめ

insertAdjacentText()メソッドを使用することで、HTML要素の開始タグや終了タグの前後にテキストを簡単に挿入することができます。これにより、既存のコンテンツを保持しながら、新しいコンテンツを動的に追加することが可能になります。このメソッドを活用して、より柔軟なコンテンツ操作を実現しましょう。