innerHTML,textContentJavaScript入門

テキストの書き換え

ではHTMLのBody内に以下のタグとスクリプトを書き込んでみてください。

<form>
<input type="button" value="テキスト" onclick="reWrite(0)">
<input type="button" value="HTMLタグ" onclick="reWrite(1)">
</form>

<div id="str">このタグの中身を書き換えます。</div>

<script>

function reWrite(num)
{
  if (document.getElementById)
  {
    if (num==0)
    {
      document.getElementById("str").textContent="<b>テキスト</b>の書換え";
    }
    else
    {
      document.getElementById("str").innerHTML="<b>タグ</b>を含む書換え";
    }  
  }
}

</script>

＜サンプル＞

スクリプトの説明

HTML部分

フォームでは２つのボタンを設置しています。 onclickイベントで、関数reWrtie()を呼び出します。 引数を設定しているのは、テキストだけ書き換える場合と、 HTMLタグを含めた書き換えのために分岐させるためです。

divタグにはid属性を付けています。id名は「str」にしました。

関数reWrite()

最初にif文を使って、 document.getElementByIdが使えるか確認しています。 古いブラウザでは対応していないことがあるので、エラー回避のために必要な処置です。

次にif文～else文で引数を確認します。0ならテキスト書き換え、 他の数値ならHTMLタグも含めた書き換えになります。

そしていよいよ、テキストの書き換え部分です。 document.getElementById()を使って書き換えるタグを指定し、 そのあとにtextContentもしくはinnerHTMLを続けます。 そして書き換えるテキストを代入します。

document.getElementById("id名").textContent =

id名の付いたタグのテキストを書き換えます。書き換える文字列がテキストのみの場合に使用。

document.getElementById("id名").innerHTML =

id名の付いたタグのテキストを書き換えます。 書き換える文字列にHTMLタグを含めることができます。

innnerHTMLは様々な用途があると思います。 前のページのようにタイマーを使って時刻等を次々と切り替え表示できますし、 ゲームのようなWebアプリケーションにも用いることができます。

一例として当サイトのクロスワードは、 promptで入力された文字列を各テーブルのマスに1文字ずつ切り取って、 innerHTMLで書き込んでいます。 数独リベンジでもクリックしたセルにラジオボタンの数字をinnerHTMLで書き込んでいます。

document.getElementById()を省略する

実際にdocument.getElementById()と書くと長いので、沢山でてくると面倒になります。 そこで、同じid名のものがある時は、以下のように省略して記すとよいでしょう。

var obj1 = document.getElementById("str");

obj1.innerHTML = "書き換えテキスト";

上記のコードをこれで書き直せばスッキリすると思われませんか？ このように変数に代入してしまうことによって、簡略化することができます。

今回はHTMLタグを含むテキストの書き換えについて見ました。 次のページでは画像を切り替える方法について考えます。