PR
構文
 
 要素.innerHTML [プロパティ]
総合 インデックス
プロパティ
FirefoxIE

説明

  •  要素内のすべての内容をHTML形式で持つプロパティ。「innerHTML」プロパティを使うと,要素内にHTML形式でコンテンツを書き出すことができる。
  •  用例では,id名「InHTML_1」か「InHTML_2」を設定したdiv要素をクリックした時,id名「InHTML_3」を設定したdiv要素の内容に置き換えている。この時,置き換わる内容は,HTML形式なので,<b>や<i>などはHTMLのタグ要素として認識される。
  •  「innerHTML」プロパティは要素内を変更するので,「outerHTML」プロパティと違い,何度も内容を書き換えることが可能。

用例

id名「InHTML_1」,「InHTML_2」を設定したdiv要素をクリックした時,id名「InHTML_3」を設定したdiv要素内にHTML形式でコンテンツを書き出す。
<html><head>
<mata http-equiv="Content-Script-Type" content="text/javascript">
<mata http-equiv="Content-Style-Type" content="text/css">
<title>innerHTML</title>
<script type="text/javascript">
<!--
var TEXT1="innerHTMLは、要素内に、指定したテキストをHTML形式で
書き出す。<br>HTML形式なので<b>ボールド</b>や
<i>イタリック</i>といったように、タグ要素が反映される。";
var TEXT2="ここが変わります。" ;
function Change() {
    if(document.getElementById){
        document.getElementById("InHTML_3").innerHTML=TEXT1
    } 
}
function Change2() {
    if(document.getElementById){
        document.getElementById("InHTML_3").innerHTML=TEXT2
    }
}
//-->
</script>
<style type="text/css">
<!--
body { background-color: #ffffff }
-->
</style>
</head>
<body>
*要素内にHTML形式でコンテンツを書き出す
<div id="InHTML_1" onClick="Change()" style="position:absolute; width:
400px; left: 30px; top: 40px">
ここをクリックして下さい!!
</div>
<div id="InHTML_2" onClick="Change2()" style="position:absolute; width:
400px; left: 30px; top: 70px">
元に戻す!!
</div>
<div id="InHTML_3" style="position:absolute; width:400px; left: 30px;
 top:120px">
ここが変わります。
</div>
</body></html>

この用例を実行する