element.innerHTMLプロパティ

element.innerHTMLは、「element」に指定した要素内のHTMLを取得、もしくは、設定するプロパティ。

構文

取得

var $innerHTML = $elementNodeReference.innerHTML;

戻り値

指定した要素内のHTML。

設定

$elementNodeReference.innerHTML = HTMLコンテンツ;

サンプル

サンプル:1

id属性がsampleである要素内のHTML:

変更後:

サンプルの動作について

  1. 「getHtml()」ボタンをクリックすると、「id属性がsampleである要素内のHTML:」の右横に「1」と表示する。
  2. 「setHtml()」ボタンをクリックすると、「サンプル:」と「変更後:」の右横に「2」と表示する。
  3. 再度、「getHtml()」ボタンをクリックすると、「id属性がsampleである要素内のHTML:」の右横に「2」と表示する。
  4. 「setHtml()」ボタンをクリックする度に、id属性がsampleである要素内のHTMLを、サンプル:<i style="color: red;">2</i>サンプル:<i style="color: red;">3</i>サンプル:<i style="color: red;">4</i>、のように数字部分をカウントアップする。
  5. 「getHtml()」ボタンをクリックすると、id属性がsampleである要素内の現在のHTMLを、「id属性がsampleである要素内のHTML:」の右横に表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
var $count = 1;
function getHtml() {
 var $elementNodeReference = document.getElementById( "sample" );
 var $innerHTML = $elementNodeReference.innerHTML;
 document.getElementById( "sampleOutput1" ).innerHTML = $innerHTML;
}
function setHtml() {
 var $elementNodeReference = document.getElementById( "sample" );
 $elementNodeReference.innerHTML = '<i style="color: red;">' + ++$count + '</i>';
 var $innerHTML = $elementNodeReference.innerHTML;
 document.getElementById( "sampleOutput2" ).innerHTML = $innerHTML;
}
</script>

HTML

<p>サンプル:<span id="sample"><i style="color: red;">1</i></span></p>
<button onclick="getHtml();">getHtml()</button>
<p>id属性がsampleである要素内のHTML:<span id="sampleOutput1"></span></p>
<button onclick="setHtml();">setHtml()</button>
<p>変更後:<span id="sampleOutput2"></span></p>

スポンサード リンク

カテゴリー: DOM, Elementオブジェクト, JavaScript, プロパティ, リファレンス パーマリンク