- simple one by one element inserting using
document.createDocumentFragment– all created elements are appended to the document fragment and than inserted into the HTML document at once
element.innerHTML– create all new elements as a string and than insert it into the document at once
The fastest method is the last and the slowest is the first method. But sometimes is better use safe DOM approach so in this cases is the best using of the second method.
- Make HTML you are inserting as simple as is possible - each attribute counts!
- If you create many elements and want event handlers attached to them don`t do it for each one element but attach one event handler to the parent element and then inside the handler self determine what the target element is.
- Insert large amount of new elements in portions not in once. The advantage is that user always see that something is happening, the disadvantage is that it is little slower than do it at once.
Below is jsFiddle with the testing document (http://jsfiddle.net/ondrejd/kLw52/):