読者です 読者をやめる 読者になる 読者になる

HTML勉強メモ

HTMLやJavaScriptなどのことについて書いています。

HTMLの取得した値の表示方法

HTML JavaScript

HTMLの取得した値の表示方法について

HTMLでJavaScriptなどで取得した値の表示を行うことができる。
HTMLで値の表示を行うには、「document.write();」を使う。
HTMLで取得した値などの表示を行うには、「document.write();」や「innerHTML」、「JQuery」などを使うことで行うことができる。
HTML5では「document.write();」の使用は非推奨とされている)
if文等で条件を分岐させた後のテキスト文の表示にも使うことができる。

スポンサーリンク



使用例の比較

・document.write();を使う場合の使用例

<script type="text/javascript">
document.write("表示する文");
</script>

・innerHTMLを使う場合の使用例

<span id="test"></span>
<script type="text/javascript">
document.getElementById("test").innerHTML = "表示する文";
</script>

表示例
HTMLで書いた文
HTMLで書いた文

document.write();で書いた文

innerHTMLで書いた文


if文で条件分岐させた場合の表示方法

別記事で作成したおみくじを「document.write()」でも表示させることができる。
「document.write();」と「innerHTML」で出力した場合の比較
「document.write()」で実行した場合、大吉などの結果が出力されたページが表示される。
(ボタンを押すと結果ページが表示されることや、非推奨とされているため省略)
「innerHTML」で出力した場合は、表示例の様に表示される。

おみくじを作成した別記事
htmlst.hatenablog.jp

document.write()を使った場合の例

<form><input type="button" value="おみくじ" onClick="random()"> </form>

<script type="text/javascript">
function random() {
var rand = Math.floor( Math.random() * 5) ; //おみくじの目の生成
        if (rand == 0) msg = "大吉";
	if (rand == 1) msg = "中吉";
	if (rand == 2) msg = "小吉";
	if (rand == 3) msg = "吉";
	if (rand == 4) msg = "凶";
        document.write(msg); //おみくじの目の出力
}
</script>

「innerHTML」を使った例

<form><input type="button" value="おみくじ" onClick="random()"> 
<span id="omikuji">表示場所</span></form>

<script type="text/javascript">
function random() {
var rand = Math.floor( Math.random() * 5) ; //おみくじの目の生成
        if (rand == 0) msg = "大吉";
	if (rand == 1) msg = "中吉";
	if (rand == 2) msg = "小吉";
	if (rand == 3) msg = "吉";
	if (rand == 4) msg = "凶";
document.getElementById("omikuji").innerHTML = msg; //おみくじの目の出力
}
</script>

表示例


表示場所


「document.write();」が非推奨とされている理由について

ブラウザのレンダリングへのよくない影響や、要素にアクセスする仕組みのへの影響、
ネットワーク遅延への影響が懸念されることや、デバッグ時のボトルネックとなるため非推奨とされている。

まとめ

・HTMLでJavaScriptの受け取った値を出力させるには「document.write();」を使う。
・HTMLで値の表示を行うには、「document.write();」や「innerHTML」、「JQuery」を使うことで行うことができる。
HTML5では「document.write();」は非推奨とされている)
・if文で条件分岐させた場合にも使うことができる。
(テキストだけでなく値の出力も行うことができる)
・document.write();はブラウザのレンダリングへのよくない影響等から非推奨とされている。

スポンサーリンク



関連記事
htmlst.hatenablog.jp
htmlst.hatenablog.jp