ふるログ

プログラム学習中の人が書くブログです。

初心者JavaScripterのために~innerHTMLの使い方~

f:id:huru555:20170502234711j:plain

僕も初心者というかいまだに本を必死に読んでJavaScriptを学んでるレベルなんですが、学んでいくうちに気付いたことや簡単なメモをまとめていきます。

innerHTMLの簡単な使い方

僕たちが慣れ親しんだ、というかほとんどのウェブサイトの情報がちょっと古くてHTML5対応になってないかもしれない感じなんですが、まあ簡単に使ってきた、document.write

 

わかりやすくて便利だよね~僕のこのブログの一番最初の記事、10連ガチャを作ってみたのやつはこれで出力してます。

 

でもこれ、HTML5では使ってはいけないということなんですね。

blog.3streamer.net

 

まあこんな感じで、代わりに使うのがinnerHTML

 

しかし、僕のリサーチ方法が甘いのか、これの使い方が書いてあるページが見つからない!!!

 

そこで、自分でいろいろ試行錯誤してやっとわかったので、書き留めるぞ。

 

まず、document.writeと違って、なにもないところに文字を出現させることができない。

 

document.writeは、例えばここで

document.write('ごちうさ');

 

とスクリプトにいきなり書いてもちゃんと文字は表示される。「ごちうさ」と。

 

しかし、innerHTMLはちゃんと文字を置く場所が必要です。

 

具体的には<div></div>とか、HTMLで表示されたボックスの中に文字を入れ込みます。

<div id="kakikomi"></div>

 

とあれば、

var kakikomi = document.getElementById('kakikomi');

 

と、idを取得してから、

kakikomi.innerHTML="ごちうさ";

 

とすれば、無事「ごちうさ」とdivボックスの中に表示されるはずです!

 

ちなみに、innerHTMLはこのように文字を出力します。

 

もちろん1とか2とか数値を出力する場合は"これで囲まなくて大丈夫です"。

ちなみにちなみに

innerHTMLは、正確には、文字の塗りつぶし。

 

<div id="kakikomi">ここに文字があってもinnerHTMLでは「ごちうさ」と塗りつぶされます。</div>

 

なんか、innerHTMLはそのままだと、指定されたところの文字をそのまま取得する・・・

 

なんかよくわかりません!。でもこれだけは覚えておかないとまずいかもしれない。

 

 

いや~長かったですね~innerHTML。

 

実際僕がこんな長々と説明しなくても困る人はいないと思うのですがまあ自分用ということで。

 

おそらくこれからもJavaScriptの記事を上げていくつもりなので、興味のある方はぜひご閲覧を。

 

クソみたいなコードですが、ガチャを作っています。

 

最近リセットボタンをやっと追加できました。

 

これはもう世に出してもいいガチャシュミレーターだと自負しています。

 

ありがとう。さよなら。