【PHP8.x】insertAdjacentElementメソッドの使い方

insertAdjacentElementメソッドの使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

insertAdjacentElementメソッドは、DOMElementオブジェクトが表す既存の要素に対して、指定された新しい要素を特定の相対位置に挿入する際に実行するメソッドです。このメソッドは、HTMLやXML文書の構造(DOMツリー)を動的に操作する際に利用されます。

このメソッドは、呼び出し元のDOMElementオブジェクト(例えば、Webページ上の特定のHTML要素)を基準として、新しいDOMElementオブジェクトをどこに配置するかを細かく制御できます。引数として、挿入位置を指定する文字列と、挿入したいDOMElementオブジェクトを受け取ります。

挿入位置には、以下の4つのオプションがあります。

  • 'beforebegin': 呼び出し元の要素の直前、つまりその要素の親の直下にある兄弟要素として新しい要素を挿入します。
  • 'afterbegin': 呼び出し元の要素の最初の子として、その要素の内容の先頭に新しい要素を挿入します。
  • 'beforeend': 呼び出し元の要素の最後の子として、その要素の内容の末尾に新しい要素を挿入します。
  • 'afterend': 呼び出し元の要素の直後、つまりその要素の親の直下にある兄弟要素として新しい要素を挿入します。

これにより、既存のDOM構造を柔軟に、かつ効率的に変更することが可能です。メソッドが正常に実行された場合、挿入されたDOMElementオブジェクトが返され、失敗した場合はfalseが返されます。この機能は、ユーザーインタフェースの動的な更新や、コンテンツの追加・変更が必要なWebアプリケーションの開発において非常に重要です。

構文(syntax)

1<?php
2$dom = new DOMDocument();
3$dom->loadHTML('<div><p id="target-element">既存の要素</p></div>');
4
5$targetElement = $dom->getElementById('target-element');
6$newElement = $dom->createElement('div', '挿入する要素');
7
8// 既存の DOMElement ($targetElement) を基準に、指定された位置に新しい DOMElement ($newElement) を挿入します。
9// 最初の引数は挿入位置 ('beforebegin', 'afterbegin', 'beforeend', 'afterend') を文字列で指定します。
10// 2番目の引数は挿入したい DOMElement オブジェクトです。
11// 成功した場合、挿入された DOMElement オブジェクトを返し、失敗した場合は false を返します。
12$insertedElement = $targetElement->insertAdjacentElement('afterend', $newElement);

引数(parameters)

string $where, DOMElement $element

  • string $where: 要素を挿入する位置を指定する文字列。
  • DOMElement $element: 挿入するDOMElementオブジェクト。

戻り値(return)

DOMElement

指定された位置に要素を挿入し、挿入した要素自身をDOMElementオブジェクトとして返します。

【PHP8.x】insertAdjacentElementメソッドの使い方 | いっしー@Webエンジニア