JavaScriptから単純にHTMLに表示

crescent-5863934_1920.jpg

前回は、16の文字列の表示を1文字ずつ増やし、最終的に16文字すべてを表示しました。

今回は、これを一気に16文字表示するとJavaScriptのソースコードがシンプルになると思い、取り上げてみました。



1 一文字ずつ表記の書き換え前のソース

前回のソースコードです。

<HTMLのソース>

<div id="effect"></div>

HTMLはたった1行だけでしたね。
改めて書きますが「今年は~~です。」の文字列は何も書かれていません。

任意のidの「id="effect"」がポイントでした。


<書き換え前のJavaScriptのソース>

const word = '今年は2021年、令和3年です。'; let i=1 ; let element = ' ' ; while (i <= word.length) { const part = word.substr(0, i) ; i++; element += `<p>${ part }</p>` ; } document.getElementById('effect').innerHTML = element;

2行目から8行目までのソースコードが、1文字ずつ増やして表示する作業を繰り返しているので、これを削除してみます。

最後の行の変数「element」がなくなりました。
表示したいのは1行目の変数「word」ですので、「element」を「word」に書き換えます。



3 書き換え後のソースコード

HTMLのソースコードはそのままです。
JavaScriptの書き換えた後のソースコードは次のようになります

const word = '今年は2021年、令和3年です。'; document.getElementById('effect').innerHTML = word;

超シンプルになりました



4 ソースコードの説明

(※項目3と全く同じソースコードです)

const word = '今年は2021年、令和3年です。'; document.getElementById('effect').innerHTML = element;

変数「word」に文字列「今年は~~です。」を代入しています。


左側半分の「document.getElementById('取得する要素のid属性')」で、HTMLからidが「effect」と書かれた部分を取得します。
HTMLに「<div id="effect">」と書かれている部分があります、ここを取得しています。

右半分の「innerHTML = 挿入する要素;」で、左半分で取得した「effect」に「word」の内容を挿入します。

「取得」とは、その要素のコンテンツや属性をプログラムで操作して、挿入や書き換え、削除が可能になること。



5 「画面に文字列を一気に表示」を実行してみます


では、実行してみます。

ちゃんと「今年は2021年、令和3年です。」と表示されました。



6 「innerHTML」を「textContent」に変えてみる

今度は、項目5と同じことをJavaScriptのソースコードの最終行の「.innerHTML = 挿入する要素;」を「.textContent = 挿入する要素;」に変えてみます。
項目5と同じに表示されました。

「innerHTML」と「textContent」の違い
innerHTML~JavaScriptのHTMLのタグを解釈して出力する

textContent~JavaScriptのHTMLのタグを解釈せずにそのまま文字として出力する
の違いのようです。

※でも「textContent」を使って太字で表示させたい場合は、HTML側に「style="font-weight: bold"」と書かれているタグのところに出力すれば、同じ効果を得ることができます。


ではやってみましょう
ちゃんと太文字で出力されていますね。


このHTMLとJavaScriptのソースコードは次のようになっています

<div id="effect3" style="font-weight: bold"> </div> <script> const word3 = '今年は2021年、令和3年です。'; document.getElementById('effect3').textContent = word3; </script>

※なお、JavaScriptが上の方と区別して出力できるように変数は「effect3」「word3」に変えてあります。



7 こんな面倒なことやらずともHTMLに直接書けば

単純に文字を表記させるだけなら、こんな面倒なことやらずともHTMLに直接書けばいいじゃん!

・・・その通りだと思います。

しかし、前回やったように1文字ずつ増やしながら文字列を出力したりする場合は、HTMLに16行記述するよりJavaScriptを使った方が便利です。

もし、これが500文字だった場合や書き換える場合や何度も同じ文字列を表示する場合など・・・HTMLの記述の手間は大変ですが、JavaScriptなら手間は変わりません。

今回は、このような仕組みでJavaScriptからHTMLに文字列を出力しているということが分かりやすいように、余分な部分をカットして紹介しました。


ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 148

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた
面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い
ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス
ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!)
かわいい かわいい かわいい かわいい かわいい かわいい かわいい かわいい かわいい

この記事へのコメント