insertRow против appendChild

Question

Какой метод предпочтителен для добавления строки в таблицу?

var tr = tbl.insertRow (-1);

или

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

Answer 1

insertRow будет намного лучше. Это поддерживается браузерами класса А, оно менее многословно и более чистый API.

Answer 2

Я вижу хорошие аргументы для insertRow, но я нахожу один недостаток: insertRow может создавать только новую пустую строку, тогда как appendChild принимает существующий объект строки. С appendChild вы можете перемещать строки в таблице, перемещать строки из одной таблицы в другую или извлекать строки из таблицы, а затем вставлять их обратно (очень удобно для таблиц с постраничной подстройкой). Чтобы сделать то же самое с insertRow (и insertCell), вам придется упаковать содержимое, создать новые строки и ячейки, а затем добавить старое содержимое в новые ячейки. Неуклюжий и, казалось бы, менее эффективный. Есть ли более изящный способ сделать это? Было бы неплохо использовать вариант insertRow, который принимает существующий объект строки.

Answer 3

insertRow можно считать более надежным, поскольку это DOM [1].

Метод appendChild всегда быстрее (хотя и незначительно) во всех протестированных браузерах (IE6 / 7, FF3, Chrome2, Opera9) при работе вне DOM, но при попытке изменить таблицы в документ (более распространенная попытка), он значительно медленнее .

Другими словами: обязательно используйте insertRow.

---

Эти тесты проводились локально, поэтому могут быть ненадежными, см. Источник здесь: http://pastie.org/482023

Answer 4

Если вы используете методы dom, tr следует добавлять к элементу tbody, thead или tfoot, а не к элементу таблицы.