JavaScript Element.innerHTML 要素の内部HTML

JavaScript ElementオブジェクトのinnerHTMLプロパティは、要素の内部HTMLを取得または設定するプロパティである。

innerHTMLの構文

element.innerHTML

innerHTMLの使用例

要素の内部HTMLを設定するJavaScriptを示す。

// プレースホルダ
<p id="p1"></p>

<script>
  var l = 'ボタン';
  var e = document.getElementById('p1');

  // p要素の内部にbutton要素を配置する
  e.innerHTML = '<button class="linkBtn">' + l + '</button>';
</script>

上記JavaScriptの実行結果を示す。

セキュリティ上の問題

ElementオブジェクトのinnerHTMLプロパティには、DOM based XSSの脆弱性がある。要素の内部HTMLを設定する場合は、innerHTMLプロパティではなく、DOM操作メソッドを使用した方が望ましい。

// プレースホルダ
<p id="p2"></p>

<script>
  var l = 'ボタン';
  var e = document.getElementById('p2');
  var b = document.createElement('button');

  // button要素にclass属性を設定する
  b.setAttribute('class', 'linkBtn');

  b.appendChild(document.createTextNode(l));

  e.appendChild(b);
</script>

上記JavaScriptの実行結果を示す。