説明
- 要素内のすべての内容を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>
この用例を実行する
