ここ数日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使うよりはスマートですけど、他にもっと上手いやり方がありそうな気がするな…。