【PHP8.x】innerHTMLプロパティの使い方

innerHTMLプロパティの使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

innerHTMLプロパティは、DOM要素の内部にあるHTMLマークアップ全体を取得または設定するために使用できる、Dom\Elementクラスのプロパティです。このプロパティを使用することで、要素の子要素を含むHTMLコンテンツを文字列として操作できます。

具体的には、innerHTMLプロパティに値を代入すると、その要素の既存の子要素がすべて削除され、指定された文字列に基づいて新しいDOMツリーが構築されます。逆に、innerHTMLプロパティの値を読み出すと、その要素の子要素を表現するHTML文字列が返されます。

このプロパティは、Webページ上で動的にコンテンツを更新する際に非常に便利です。例えば、サーバーから取得したデータを基にHTML構造を生成し、それを特定の要素内に表示させたい場合に、innerHTMLプロパティを使って簡単に実現できます。

ただし、innerHTMLプロパティを使用する際には、クロスサイトスクリプティング(XSS)攻撃のリスクに注意が必要です。信頼できないソースからのデータに基づいてinnerHTMLを更新すると、悪意のあるスクリプトが実行される可能性があります。そのため、外部からの入力データをinnerHTMLに設定する前に、適切にエスケープ処理を行うなどのセキュリティ対策を講じることが重要です。

innerHTMLプロパティは、DOM操作において強力なツールですが、セキュリティ上の注意点も理解した上で、適切に使用する必要があります。安全なWebアプリケーションを開発するために、入力データの検証とエスケープ処理を徹底することが推奨されます。

構文(syntax)

1<?php
2
3$document = new Dom\Document();
4// HTML文字列を読み込む(<html><body>タグは自動的に補完される)
5$document->loadHTML('<div id="main">これは元のテキストです。</div>');
6
7// id="main" を持つ Dom\Element を取得
8$element = $document->getElementById('main');
9
10// innerHTML プロパティを読み取る
11$current_html = $element->innerHTML; // "これは元のテキストです。"
12
13// innerHTML プロパティを書き換える
14$element->innerHTML = '<b>太字の新しいテキスト</b>';
15
16// 変更後のHTML全体を出力する
17echo $document->saveHTML();

引数(parameters)

引数なし

引数はありません

戻り値(return)

string

Dom\Element::innerHTML は、要素の内部に含まれる HTML 文字列を返します。

【PHP8.x】innerHTMLプロパティの使い方 | いっしー@Webエンジニア