HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのinsertAdjacentText()メソッドとは？構文と使い方を解説

HTML DOMのinsertAdjacentText()メソッドは、指定した位置にテキスト文字列を挿入するためのメソッドです。既存の要素や子ノードを書き換えることなく、対象ノードを基準とした相対的な位置に新しいテキストノードを追加できます。

構文

insertAdjacentText()は、第1引数に挿入位置を示す「positionString」、第2引数に挿入するテキストを指定して呼び出します。

node.insertAdjacentText(“positionString”, text)

positionStringに指定できる値

positionStringには、以下の4つの値を指定できます。

positionString説明
beforebeginノード要素の開始タグの直前（要素の外側）にテキストを挿入します
afterbeginノード要素の開始タグの直後（要素の内側の先頭）にテキストを挿入します
beforeendノード要素の終了タグの直前（要素の内側の末尾）にテキストを挿入します
afterendノード要素の終了タグの直後（要素の外側）にテキストを挿入します

挿入位置のイメージ

<!-- beforebegin：ここに挿入 -->
<node>
  <!-- afterbegin：ここに挿入 -->
  既存のコンテンツ
  <!-- beforeend：ここに挿入 -->
</node>
<!-- afterend：ここに挿入 -->

なお、insertAdjacentText()は引数で渡された文字列をHTMLとして解析せず、そのままプレーンテキストとして挿入します。そのため特殊文字もそのまま表示され、HTMLを解析するinsertAdjacentHTML()と比べて安全に利用できる点が特徴です。

サンプルコード

insertAdjacentText()メソッドの具体的な使用例を見てみましょう。この例では、ボタンをクリックすると見出し（h2要素）の先頭に「DR. 」というテキストが挿入されます。

<!DOCTYPE html>
<html>
<head>
<title>insertAdjacentText()</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>insertAdjacentText( )</legend>
<h1>First Muslim President of India</h1>
<h2 id="president">A.P.J Abdul Kalam</h2>
<input type="button" onclick="rectifyName()" value="Correct Name">
</fieldset>
</form>
<script>
    function rectifyName() {
        var presidentH2 = document.getElementById("president");
        presidentH2.insertAdjacentText("afterbegin", "DR. ");
    }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

「Correct Name」ボタンをクリックする前：

HTML DOMのinsertAdjacentText()メソッドとは？構文と使い方を解説

「Correct Name」ボタンをクリックした後：

HTML DOMのinsertAdjacentText()メソッドとは？構文と使い方を解説

  1. HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説

    HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや

  2. HTML DOM normalize()メソッドとは？テキストノードの正規化をわかりやすく解説

    normalize()メソッドとはHTML DOMのnormalize()メソッドは、指定したノード内にある空のテキストノードを削除し、隣接するテキストノードどうしをひとつのノードに結合するためのメソッドです。JavaScriptでDOMを動的に操作していると、意図せず空のテキストノードが残ったり、複数のテキストノードが連続して存在したりすることがあります。normalize()メソッドを使えば、こうした不要なノードを一括で整理でき、childNodesリストをクリーンな状態に保つことができます。構文normalize()メソッドの基本的な呼び出し方は以下の通りです。document.norm