javascript - Fastest DOM insertion

Question

What are the best practices for doing DOM insertion?

• Is it faster to insert large chunks of html vs element at a time in a loop?
• Does it matter what html you are inserting, or only how big the chunk is?
• It it faster to insert a table, vs inserting just the rows using the table hack?

Answer 1

Setting innerHTML is often faster than inserting seperate nodes.

Another possibility would be to create a DocumentFragment, which allows to insert the nodes all at once. Another advantage of using DocumentFragments is that they can easily be cloned, which can replace a lot of use cases for innerHTML and is potentially faster as no parsing is involved.