0

I have array of data that I want to append to an existing table. So, I am basically adding rows to a table by cloning the last row. 

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

While looping through the array of data, I set new values for each columns in the clonedRow 

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

and append to the table. 

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

The loop continues (cloning, inserting values, appending...).

I thought it might be faster if I append outside of the loop, so I created a documentFragment

4) var docFrag = document.createDocumentFragment();

and appended clonedRow to the fragment instead of the table

5) docFrag.appendChild(clonedRow);

And then when it was all completed, I would append the document fragment to the table:

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

The problem is that I am getting HierarchyRequestError right where I am appending the row to the document fragment (step 5). Can anyone tell me how to fix this?

alpha
  • 501
  • 2
  • 7
  • 22

1 Answers1

0

This error is thrown when insertion of an element to a specific point in the DOM is not allowed or you are trying to move a node into itself. And there are plenty of other reason for same.

Refer answer by kelly norton

Community
  • 1
  • 1
Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
  • I read through the link, but I am still unsure how to resolve my problem. So I can't append a cloned row into a document fragment? – alpha Apr 25 '14 at 14:43
  • You should rather put the elements into a jQuery object, and then clone() that rather than using `createDocumentFragment` – Milind Anantwar Apr 25 '14 at 14:46
  • guess im just confused on what you mean by putting elements in a jQuery object. I am using the example from http://learn.jquery.com/performance/append-outside-loop/ – alpha Apr 25 '14 at 18:28