【Javascript】HTML内にスクリプトを挿入して実行

この記事では、Javascriptを用いて、HTMLページにスクリプト(Javascript)を入れて実行させる方法を紹介します。

HTML中にスクリプト挿入・実行

Javascriptでは、DOM操作を用いることで、HTMLページ中のスクリプトを挿入して実行させることができます。
これを使うことで動的(ダイナミック)なページを作ることができます。
今回は、「document.createElement」と「appendChild」を用いて実装してみました。

【書式】
var script = document.createElement(‘script’);
script.innerHTML = code;
document.getElementById(‘nicovideo’).appendChild(script);

HTMLページの指定したIDを持つタグ内に、スクリプト(code)を挿入して実行

ソースコード

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

【index.html】

実行結果

サンプルプログラムの実行結果は下記の通りです。
index.htmlを開くと「にゃんぱすー」と書かれたアラート画面が表示されます。
(bタグも挿入されている)

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

関連記事