how to insert a a set of table rows after a row in pure JS

Question

I have the following problem: I need to insert N rows after row X. The set of rows i need to insert is passed to my function as chunk of HTML consisting of TR elements. I also have access to the TR after which i need to insert.

This is slightly different then what i have done before where i was replacing TBODY with another TBODY.

The problem i am having is that appendChild requires a single element, but i have to insert a set.

Edit:

Here is the solution :

function appendRows(node, html){ 
    var temp = document.createElement("div");
    var tbody = node.parentNode;
    var nextSib = node.nextSibling;

    temp.innerHTML = "<table><tbody>"+html;
    var rows = temp.firstChild.firstChild.childNodes;

    while(rows.length){
     tbody.insertBefore(rows[i], nextSib);
    }
}

---

see this in action:

http://programmingdrunk.com/test.htm

Answer 1

You'll need to append them one by one.

Answer 2

you need to determine if row X is the last row...

//determine if lastRow...
//if not, determine row_after_row_x
for(i in n_rows){
  if(lastRow){
    tbodyObj.appendChild(row_i_of_n);
  } else {
    tbodyObj.insertBefore(row_i_of_n, row_after_row_x);
  }
}

Answer 3

What altCognito said, just be aware of the big innerHTML tbody bug in case you want to replace everything at once using innerHTML because you're doing a lot of this and the DOM operations turn out to be too slow.

Answer 4

There is an error with IE using innerHTML to insert the rows, so that won't work. Straight from the horse's mouth: http://www.ericvasilik.com/2006/07/code-karma.html

I would recommend just updating the tbody, but appending your code where it belongs in the new structure.

Answer 5

With your table object you can insert a new row into it.

var tbl = document.getElementById(tableBodyId); 
var lastRow = tbl.rows.length; 
// if there's no header row in the table, then iteration = lastRow + 1 
var iteration = lastRow; 
var row = tbl.insertRow(lastRow);

it will insert a row at the end of your table.

Answer 6

if(node.nextSibling && node.nextSibling.nodeName.toLowerCase() === "tr")

What's this for? I don't think you need it. If node.nextSibling is null, it doesn't matter. You can pass that to insertBefore and it will act the same as appendChild.

And there's no other element allowed inside a tbody than ‘tr’ anyway.

for(var i = 0; i < rows.length; i++){
    tbody.insertBefore(rows[i], node.nextSibling);

This won't work for multiple rows. Once you've done one insertBefore, node.nextSibling will now point to the row you just inserted; you'll end up inserting all your rows in reverse order. You'll need to remember the original nextSibling.

ETA: plus, if ‘rows’ is a live DOM NodeList, every time you insert one of the rows into the new body, it removes it from the old body! Thus, you are destroying the list as you iterate over it. This is a common cause of ‘every other one’ errors: you process item 0 of the list, and in doing so remove it from the list, moving item 1 down into where item 0 was. Next you access the new item 1, which is the original item 2, and the original item 1 never gets seen.

Either make a copy of the list in a normal non-live ‘Array’, or, if you know it's going to be a live list, you can actually use a simpler form of loop:

var parent= node.parentNode;
var next= node.nextSibling;
while (rows.length!=0)
    parent.insertBefore(rows[0], next);

i have to insert a set.

Usually when you think about inserting a set of elements at once, you want to be using a DocumentFragment. However, unfortunately, you can't set ‘innerHTML’ on a DocumentFragment, so you'd have to set the rows on a table like above, then move them one by one into a DocumentFragment, then insertBefore the documentFragment. Whilst this could theoretically be faster than appending into the final target table (due to less childNodes list-bashing), in practice by my testing it isn't actually reliably significantly faster.

Another approach is insertAdjacentHTML, an IE only extension method. You can't call insertAdjacentHTML on the child of a tbody, unfortunately, in the same way as you can't set tbody.innerHTML due to the IE bug. You can set it inside a DocumentFragment:

var frag= document.createDocumentFragment();
var div= document.createElement(div);
frag.appendChild(div);
div.insertAdjacentHTML('afterEnd', html);
frag.removeChild(div);
node.parentNode.insertBefore(frag, node.nextSibling);

Unfortunately, somehow insertAdjacentHTML works very slowly in this context for some mysterious reason. The above method is about half the speed of the one-by-one insertBefore for me. :-(