チェックが入った時に処理

Question

前回の質問でチェックボックスの結果を取得するプログラムを勉強したんですが、それを活用して、チェックされたら、プログラムを実行方法（hello world)を表示したいんです。
実行してみると、表示はするんですが、今までに表示されていたものが全て消え表示したい文字が表示されます。

<input type="checkbox" class="custom-control-input" name="zero" id="zero">

<script>
	$(function(){
		$('#zero').on('keyup change',function(e){
			if($(this).prop("checked")){
				document.write("<h1>Hello World!!</h1>");
			}
		});
	});
</script>

Answer 1

【document . writeはやめて、innerHTMLを使おう | Web Developers Antenna ウェブ開発者アンテナ [W'ANEB]】
http://web.antenna.work/innerhtml/

Comments

[ryo-dev]

回答ありがとうございます。
innerHTMLは、事前にhtmlでタグを記述しておきそこにjavascriptで追加するという方法ですか？

[kei344]

そうですね。

[ryo-dev]

document . write　はどうして良くないのでしょう？

[kei344]

リンク先を読んだ上で質問されているのでしょうか。HTML5では document.write(もしくはwriteln) の使用が推奨されていません。

【3.3 APIs in HTML documents — HTML5】
https://www.w3.org/TR/2011/WD-html5-20110525/apis-in-html-documents.html#document.write

【旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita】
http://qiita.com/gaogao_9/items/ec2b867d6941173fd0b1#documentwrite%E3%81%AF%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84-no_good

[ryo-dev]

旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
を見てなんとなく理解はできました。