input要素を操作すると "このコマンドはサポートされていません" エラーになることがある

次のように JavaScript/jQuery を使って HTML フォームを動的に生成しようとすると、IE6 だと "このコマンドはサポートされていません" というエラーが発生します。

var form = $('<form />')
  .addClass('editor');

$('<input />')
  .addClass('small')
  .attr('type', 'button')
  .attr('value', 'OK')
  .click(function() {
  })
  .appendTo(form);

Microsoft サイトから該当する技術情報が見当たらなかったのですが、どうやら input 要素の type 属性を変更しようとすると、このエラーになるようです。上記の JavaScript でいうと、type 属性に botton を指定する箇所が該当します。

ですので、HTML フォームを動的に生成するときは、DOM 操作ではなく、次のように innerHTML の仕組みを使って input 要素を生成する必要がありそうです。

var form = $('<form />')
  .addClass('editor');

$('<input type="button" />')
  .addClass('small')
  .attr('value', 'OK')
  .click(function() {
  })
  .appendTo(form);

ちょっと解せない感じは残りますが、この JavaScript は、他のブラウザでも期待どおり動作しています。