IE7以前では、DOMのsetAttributeにひと工夫が必要

クライアントスクリプトで動作するリンクやボタンを実装する場合、HTMLに直接

<button type="button" onclick="関数名とか">何かのボタン</button>

などと書いてしまうと、スクリプトが無効な環境では「押しても何も起きない」という悲しい現象になってしまいます。このような場合、オブジェクト自体をスクリプトで書き出すようにすれば、動作しないリンクやボタンが表示されるというマヌケな事態を避けることができます。

  • もっとも、スクリプト無効環境で非表示にしてしまうことにより、スクリプトを有効にした場合にどんなメリットがあるかを知るのが難しくなるので、別途noscript要素を使うなどして説明を書いておくとよいかと思います。

というわけで、JavaScriptを使ってボタンを書き出してみます。

var button = document.createElement("button");
button.setAttribute("type", "button");
button.setAttribute("onclick", "関数名とか");

var buttonText = document.createTextNode("何かのボタン");
button.appendChild(buttonText);

var buttonOutput = document.getElementById("書き出したいHTML要素のID");
buttonOutput.appendChild(button);

ところがIE7以下だと、スクリプトを有効にすればボタン自体は表示されるものの、onclick属性で指定した関数が実行されません。いろいろ調べてみたところ、やはりIEの実装によるもののようで。

この (手抜き) 実装が原因で、getAttribute / setAttribute で class 、style 、イベント属性などを操作できないというバグが IE にはあります。

IE の getAttribute / setAttribute: Days on the Moon(nanto.asablo.jp)

ただし、new Function〜の方法を採ると、今度はIE8やFirefox、Safariで動作しなくなってしまいます。(Operaは両方いけるようです。)