Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

JS which adds many Dom nodes, how do I temporarily disable rendering?

programmed insertion of table rows slows up rendering



1:11 am on Jun 17, 2003 (gmt 0)

10+ Year Member

I have a page where I use a JavaScript method to programmatically insert rows into a table via the Dom interface (after clearing all the previous rows of course).

Depending on the content, sometimes there may be quite a few rows... I've noticed its very slow if there are > 50 rows and I believe this is probably due to the fact that the browser never really knows when I'm done inserting these rows (at what point does it decide : "Ok, their done updating this table, now let me re-render it"). I suspect its starting this re-render process several times during the time I'm inserting rows.

What I would LIKE to do is :

1) tell the browser (or a portion of the Dom tree) to: "Ignore updates for a bit, I'm going to be inserting a bunch of nodes, so you might as well wait until I'm done...."
2) insert all my nodes (rows in a table in this case)
3) tell the browser (or Dom tree): "Ok, you can re-render now, I'm done with my modifications to the Dom tree".

Anyone got a clue on how to do this...?

BTW - I've tried just building up a big string and saying

someDomElement.innerHTML = myHtmlSnippit;

But this causes some other timing issues for me.


3:47 am on Jun 17, 2003 (gmt 0)

10+ Year Member

I tried this (note IE6 didn't like me trying to insert rows into a dom element of type "tbody" unless that element had a parent "table").

var newTableBody = document.createElement("tbody");
newTableBody.id = "MyTBodyId";

//--- keep IE happy...
var tempParent = document.createElement("table");

for (...)
var documentTr = newTableBody.insertRow(i);
//--- <snip> populate each row...

//--- replace the old tbody with the new one...
var oldTableBody = document.getElementById("MyTBodyId");
var domTable = oldTableBody.parentNode;

domTable.replaceChild(newTableBody, oldTableBody);

This works fine...

Anyway, about the time I got this all working, I came across the following example from Danny Goodman (the Orielly DHTML guy).


He says in his 4/2003 update not to use the specialized table inserts (use the normal dom manipulation stuff instead). He also suggested using the DocumentFragment facility. I revamped mine to do follow this, so now it looks like :

var bodyElem =document.getElementById("MyTBodyId");

//--- clear the old table body...

var workingFragment = document.createDocumentFragment();

for (...)
var domTr = document.createElement("tr");

//--- insert td elements, etc.

//--- now insert back into tbody...

I can tell a speed difference (thought its still not blazing fast for > 100 rows in IE). Interestingly, performance in Mozilla Firebird .6 is MUCH faster (about 2-3 times faster than IE6).


4:29 am on Jun 17, 2003 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Welcome to the forum, and thanks very much for sharing your development process with us. Sorry no one had anything to add so far, including me :(

But you have given me some new areas to study, especially the documentFragment approach.

IE6 didn't like me trying to insert rows into a
dom element of type "tbody" unless that element had a
parent "table"

It's not just the IE browser, but the W3C spec itself that says tbody MUST be inside a table:

If you use the thead, tfoot and tbody elements,
you must use every element, but you can leave them

They should appear in this order:
<thead>, <tfoot> and <tbody>, so that browsers can
render the foot before receiving all the data.

You must use these tags within the table element.

W3Schools reference [w3schools.com]


11:30 am on Jun 17, 2003 (gmt 0)

10+ Year Member

don't use insertRow()
use appendChild/createElement

this is modified, but only for test

var newTableBody = document.createElement("tbody");
newTableBody.id = "MyTBodyId";

var documentTr = newTableBody.appendChild(document.createElement("TR"));

var tempParent = document.createElement("table");
tempParent.border = "1";


Featured Threads

Hot Threads This Week

Hot Threads This Month