HierarchyRequestError - jquery

У меня есть массив данных, которые я хочу добавить в существующую таблицу. Итак, я в основном добавляю строки в таблицу, клонируя последнюю строку.

1) var clonedRow = $("#tableId" tr:last-child").clone(true);

Пробираясь по массиву данных, я устанавливаю новые значения для каждого столбца в clonedRow

2)
  $("td", clonedRow).eq(1).html("new data"); 
  $("td", clonedRow).eq(2).html("new data");

и добавить к таблице.

3) $"#tableId").append(clonedRow);

Цикл продолжается (клонирование, вставка значений, добавление...).

Я думал, что это может быть быстрее, если я добавлю за пределы цикла, поэтому я создал documentFragment

4) var docFrag = document.createDocumentFragment();

и добавлено clonedRow к фрагменту вместо таблицы

5) docFrag.appendChild(clonedRow);

И затем, когда все будет завершено, я добавлю фрагмент документа к таблице:

6) $("#"+gridID).appendChild(frag);

Проблема в том, что я получаю HierarchyRequestError правильно, где я добавляю строку к фрагменту документа (шаг 5). Может ли кто-нибудь сказать мне, как это исправить?