element.innerHTMLは、「element」に指定した要素内のHTMLを取得、もしくは、設定するプロパティ。
構文
取得
var $innerHTML = $elementNodeReference.innerHTML;
戻り値
指定した要素内のHTML。
設定
$elementNodeReference.innerHTML = HTMLコンテンツ;
サンプル
サンプル：1
id属性がsampleである要素内のHTML：
変更後：
サンプルの動作について
- 「getHtml()」ボタンをクリックすると、「id属性がsampleである要素内のHTML：」の右横に「1」と表示する。
- 「setHtml()」ボタンをクリックすると、「サンプル：」と「変更後：」の右横に「2」と表示する。
- 再度、「getHtml()」ボタンをクリックすると、「id属性がsampleである要素内のHTML：」の右横に「2」と表示する。
- 「setHtml()」ボタンをクリックする度に、id属性がsampleである要素内のHTMLを、
サンプル：<i style="color: red;">2</i>、サンプル：<i style="color: red;">3</i>、サンプル：<i style="color: red;">4</i>、のように数字部分をカウントアップする。 - 「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>
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>
<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>