createDocumentFragment vs innerHTML

DOM access takes a lot of time, you should think about this every time you are programming and optimize your code avoiding unnecessary access.

• If you are going to insert a bunch/list of elements in the DOM and you want to show/insert them one by one, use createDocumentFragment, it’s the fastest way.
• If you want to show/insert them all when they are ready, at the same time, use innerHTML, in this case it will be faster even than createDocumentFragment.

Never use innerHTML when you want to render one by one, it’s the slowest one (DOM access + creation).

If you want test it for your own and see the timing, run the code below with num: 10, 100, 500, 1500.