要素内のHTMLを取得・設定

要素内のHTMLを取得・設定

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【HTML文を参照する】
innerHTML プロパティは、HTMLElement オブジェクトの innerText プロパティと違って、HTML要素を含んで参照される。

書式；element.innerHTML

戻り値は要素に含まれる HTML 文が文字列で戻されます。HTML 文は HTML ファイルに記述されている内容をそのまま取得します。

例えば
次の div 要素ノードの innerHTML プロパティの値を参照した場合、どのような値を返すのか確認します。

＜div＞
  ＜p＞Apple＜br＞Lemon＜/p＞
  ＜p＞Orange＜/p＞
＜/div＞

div 要素ノードにはの 2 つの p 要素ノードが含まれています。要素内の HTML 文をそのまま取得しますので、 div 要素ノードの innerHTML プロパティの値を参照すると次のような値となります。

＜p＞Apple＜b＞Lemon＜/p＞
  ＜p＞Orange＜/p＞

サンプル

ブラウザを立ち上げる

表示されたボタンをクリックすると、 id 属性の値が 'shopinfo' の要素ノードを取得し、その innerHTML プロパティの値を取得してコンソールに出力します。

【新しいHTML文を設定する】

innerHTML プロパティは参照するだけではなく新しい値を設定することができます。

書式：element.innerHTML = 'value'

要素の innerHTML プロパティの値に新しい文字列を設定すると、対象の要素の子孫要素のノードがすべて削除されたあとに設定した HTML 文の値が追加されます。この時、 HTML で特別な意味を持つ文字が含まれていてもエスケープは行われずにそのまま追加されます。

サンプル

ブラウザを立ち上げる

ボタンを押すと下記のようになる

【HTML文の中にscriptタグが含まれていた場合】
nnerHTML プロパティには HTML 文を新しい値として設定できるため、 ＜script＞ タグが含まれる HTML 文も設定できます。ただ innerHTML プロパティを利用して ＜script＞ が設定された場合は記述されたスクリプトは実行されません。

＜script＞の入れ子は出来ない！
let element = document.getElementById('shopinfo');
element.innerHTML = '＜script＞alert("Hello")＜/script＞';

1.ブラウザを立ち上げる 

2.ボタンをクリックすると下図のように成る

＜script＞alert("南青山")＜\/script＞'が起動してないのが確認出来る。

もし、alert("南青山")を表示したいのなら、下記のように書き換える

＜script＞

function setTextToElement(){

    let element = document.getElementById('shopinfo');

    let s = '南青山の洋食屋さん';

    element.innerHTML = s;

    alert("南青山");

}

＜/script＞
ブラウザを立ち上げ、ボタンを押すと、アラートが現れる。OKを押すと

この様になったら、OK

【要素自身も含めたHTML文を参照する】
Element オブジェクトの outerHTML プロパティを参照すると要素と要素に含まれる HTML 文を取得することができます。

 

書式：element.outerHTML

戻り値は要素と要素に含まれる HTML 文が文字列で戻されます。

HTML 文は HTML ファイルに記述されている内容をそのまま取得します。
例えば、
次の div 要素ノードの outerHTML プロパティの値を参照した場合、どのような値を返すのか確認します。

nnerHTML では、下図のように要素に含まれる HTML 文が取得できる

outerHTML では、下図のように要素自身も含めて取得できる

サンプル

ブラウザを立ち上げる

ボタンを押すと、上手のように成れば、OK