javascript - insertRow と appendChild の比較

Question

テーブルに行を追加するには、どの方法が適していますか?

var tr = tbl.insertRow(-1);

また

var tr = document.createElement('tr'); tbl.appendChild(tr);

?

Answer 1

insertRowはるかに良いでしょう。グレードAのブラウザでサポートされており、冗長性が低く、APIがクリーンです。

Answer 2

insertRowには適切な引数がありますが、欠点が1つあります。insertRowは新しい空の行しか作成できないのに対し、appendChildは既存の行オブジェクトを取得します。appendChildを使用すると、テーブル内で行を移動したり、あるテーブルから別のテーブルに行を移動したり、テーブルから行を取り出して後で元に戻したりすることができます（ページングされたテーブルに非常に便利です）。insertRow（およびinsertCell）で同じことを行うには、コンテンツをパッケージ化し、新しい行とセルを作成してから、古いコンテンツを新しいセルに追加する必要があります。不器用で、一見効率が悪いようです。これを行うためのより優雅な方法はありますか？既存の行オブジェクトを取得するinsertRowのバリアントがあれば便利です。

Answer 3

insertRowDOM [1]であるため、より信頼性が高いと主張される可能性があります。

この方法は、DOMの外部appendChildで操作する場合、テストされたすべてのブラウザー（IE6 / 7、FF3、Chrome2、Opera9）で一貫して高速ですが、ドキュメント内のテーブルを変更しようとすると（より一般的な試み）、大幅に低速になります。

言い換えれば、間違いなくを使用してinsertRowください。

---

これらのテストはローカルで実行されたため、信頼できない可能性があります。http：//pastie.org/482023のソースを参照してください。

Answer 4

dom メソッドを使用する場合は、tr を table 要素ではなく、tbody、thead、または tfoot 要素に追加する必要があります。