[javascript]innerHTMLとサンプル

innerHTMLのサンプル01

クリックでhtmlを書き換えます。

サンプルサンプルサンプル

<script type="text/javascript">
function clicli(){

  document.getElementById("target").innerHTML = '<a href="#">リンクとaタグ</a>';

}
</script>

<blockquote>
<div><input type="button" value="実行" onclick="clicli()"/></div>
<p id="target">サンプルサンプルサンプル</p>
</blockquote>

innerHTMLのサンプル02

ここに結果を表示

<style>
table.innerHTML_sample {
  border-collapse:collapse;
}
table.innerHTML_sample td{
  padding:10px;
  border:1px #333333 solid;
}
</style>

<script type="text/javascript">
function clicli02(){
  document.getElementById("target02").innerHTML = '<table class="innerHTML_sample">'
  + '<tr><td>項目1</td>'
  + '<td><a href="#" target="_blank">innerHTMLの動作サンプル02</a></td></tr>'
  + '<tr><td>項目2</td>'
  + '<td><a href="#" target="_blank">innerHTMLの動作サンプル02</a></td></tr>'
  + '</table>';
}
</script>

<blockquote><div class="mgb10"><input type="button" value="実行" onclick="clicli02()"/></div>
<div id="target02">ここに結果を表示</div></blockquote>

innerHTMLのサンプル03

innerHTMLのみでタグ内の画像を書き換えている。

innerHTMLのサンプル04

単純にjavascriptとhtmlを増やすだけで、動きのバリエーションが増える。