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

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. 🙁