innerHTMLで書き出したJavaScriptが実行できない

ここ数日Ajaxを駆使して自分のホームページの管理画面を作りこんでいたのですが、innerHTMLで書き出した中にあるJavaScript文は実行されないという事実をはじめて知りました。

<div id="TestArea"></div>
<script>
<!--
$('TestArea').innerHTML = '<script>alert(1)</script>':
//-->
</script>


ちょっとググってみたらscriptを抜き出して親側でevalをかける…なんて荒技も使っている人が居ましたが、やり方があまりに美しくない。ところが同じような悩みを持つ人は他にもいらっしゃるようでprototype.jsにこれに対応した書き換え部品が用意されていました。

<div id="TestArea"></div>
<script>
<!--
Element.update($('TestArea'), '<script>alert(2)</script>');
//-->
</script>

eval使うよりはスマートですけど、他にもっと上手いやり方がありそうな気がするな…。

    この記事へのコメント

    メールアドレスが公開されることはありません。

    頂戴したコメントは管理者に承認されるまで表示されません。