JavaScriptとDOMでプログラミングする時の問題 - GOL @Wiki

JavaScriptとDOMでDOM Scriptingする時に引っかかる罠などについて。まぁFAQみたいなんですけど。

• テーブルをDOM Scriptingで動的に生成する際、IEはtbodyがないと動かない件について
• IEがイベントハンドラ関数をsetAttribute()することを拒否する件について

テーブルをDOM Scriptingで動的に生成する際、IEはtbodyがないと動かない件について

たとえば、

var table = document.createElement('table');
var tr = document.createElement('tr');
var td = document.createElement('td');
var txt = document.createTextNode('Hello World');
td.appendChild(txt);
tr.appendChild(td);
table.appendChild(tr);

とか書いた場合、FireFoxやChromeでは問題なく動くようですが、IEだと動きません。

IEは、

<table>
  <tbody>
    <tr>

という構造を要求しているからです。

tbody要素もcreateElementしてappendChildしてあげましょう。ちなみにDOM Scriptingで動的に追加しない場合、つまり単なるブラウジングの場合は、IEがtbodyを勝手に補完してくれるので問題なく見れるとのことです。

IEがイベントハンドラ関数をsetAttribute()することを拒否する件について

たとえば、HTMLに対してJavaScriptでボタン要素を動的に追加したい場合、下記のように書けば普通に動くはずです。

var elem = document.createElement('input');
elem.type = 'button';
elem.value = 'PUSH!'
elem.setAttribute('onclick', 'onPushed()');

「PUSH!」と書かれたボタンを押すと、onPushded()関数が呼ばれるという寸法です。このコードはFireFoxでもChromeでもOperaでも動きます。
しかしなんと！IEでは動きません！IE6でもIE7でもだめでした。

そこでググッてみると、出るわ出るわ。。
うーん、FAQ！

このページによると、下記のようなコードでもいいみたいです。

elem.setAttribute('onclick', new Function("onPushed(arg);"));

こう書くと、onPushed(arg)が呼び出されるのです。

しかし今度はIEでは動くが他のブラウザで動かないという、本末転倒な事態に陥ります。仕方がないのでブラウザ判定して呼び出すことにしました。

もう1つ、

elem.onclick = onPushed;

という書き方ですとどのブラウザでもOKなようですが、どうも()をつけたらだめなようです。引数を渡したいときはどうするんでしょうね。。