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

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

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

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

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

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

## ソースコード

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


【index.html】


## 実行結果

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

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

コメント