jQueryでボタンを押すたびに文字を表示させたり消したりする

<script type="text/javascript">

$(function(){

  $("button#kesu").click(function(){

    $(".tokyo").html("");  

  })

  $("button#hyouzi").click(function(){

    $(".tokyo").html("トウキョウ");  

  })

});

</script>

<button id="hyouzi">表示する</button>

<button id="kesu">消す</button>

<div class="tokyo">東京</div>

上記のソースでは、

まずブラウザに

東京

と漢字で表示される。まだボタンはクリックされていないので

イベントは発生していないため、もともとの記述（漢字の東京)が表示される。

その状態で、ボタン「消す」をクリックすると、

漢字の東京の文字が消える。これは正確には、消えるのではなく

""つまり「何も記載が無い」状態に変更される、と言ったほうがよい。

その処理を実行しているのが

  $("button#kesu").click(function(){

    $(".tokyo").html("");  

  })

の部分である。

続いて、ボタン「表示する」を押す。

すると、カタカナでトウキョウと、ブラウザに表示される。

これは、

  $("button#hyouzi").click(function(){

    $(".tokyo").html("トウキョウ");  

  })

によるものである。よって、もともと書いてあった漢字の東京を

復活させることはできない。

サンプルソース

http://tokyo-webs.jp/sample_source/130312b/

東京ウェブ制作