innerHTMLに設定したscript要素は無効になる。代替方法は？

JavaScriptではinnerHTMLプロパティに設定したscript要素は実行されません。

例えば、次のような記述です。

elem.innerHTML = '<script>alert("hello");</script>';

script要素が実行されないのは、安全性を考慮した上での仕様です。

上の記述でscript要素が実行できたら、危なくてしょうがないですよね。

scriptを実行するための代替方法

innerHTMLプロパティにscript要素を設定することができないため、 変わりにcreateElement()を使って、script要素を作成します。

次のようなコードとなります。

HTML

<p id="test"></p>

JavaScript

var elem = document.getElementById('test');

var s = document.createElement('script');

s.innerHTML = 'alert("hello")';

elem.appendChild(s);

まずcreataElement()でscript要素を作成します。

次に実行したい命令をinnerHTMLに設定します。

最後に appendChild()で追加すると、実行されます。

この方法ならinnerHTMLプロパティでscriptを実行することができます。