【Javascript】HTML内に文章とタグを挿入 innerHTML

Javascript

2017.01.22

この記事では、Javascriptを用いて、HTMLページに文章とタグを入れて表示させる方法を紹介します。

HTML中に文字挿入

Javascriptでは、DOM操作を用いることで、HTMLページ中の文章とタグを書き換えることができます。
これを使うことでWebページの文章を動的に変化させることができます。

【書式】
document.getElementById(“ID名”).innerHTML = 文字列;

HTMLページの指定したIDを持つタグ内に文字列を挿入

※1 textContentだと文章しか書き換えできません。
※2

pre> タグはinnerHTMLで挿入しても実行されません。

サンプルプログラムのソースコードは下記の通りです。
【main.js】

【index.html】

サンプルプログラムの実行結果は下記の通りです。
index.htmlを開くと画面に太文字で「にゃんぱすー」と表示されます。
（bタグも挿入されている）

にゃんぱすー

【おすすめ関連記事】
・Javascript入門基本文法