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

この記事では、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入門 基本文法

コメント