This example shows different approaches to adding DOM elements to the document: using DOM functions, html chunks concatenation into a string, joining array of HTML chunks.
Take into account that there are 1000 elements in the list, and in real-world applications you should not use such amount (or you have to redesign your application).
There are 5 buttons you could see below: “createElement” would add elements using document.createElement(), “createElement full” — would use document.createElement() with complete HTML element source (works only in IE6), “innerHTML” — would create elements by appending HTML source to innerHTML property, “innerHTML optimized” concatenating HTML into one string and then assigning it to innerHTML property, “innerHTML join” would create array of HTML chunks and then join it into the innerHTML property. When you click on any button, corresponding test code will be shown below it.
createElement createElement full innerHTML innerHTML optimized innerHTML join
[lang_en]
And the large list examples. “innerHTML optimized large” — create list with complicated elements using string concatenation, “innerHTML join large” — the same list but using array of HTML chunks.
[/lang_en]
[lang_ru]
И пример с большим списком. “innerHTML optimized large” — создает список со сложными элементами используя склеивание строк, “innerHTML join large” — то же самое, но с использованием массива кусков кода HTML.
[/lang_ru]
innerHTML optimized large innerHTML join large
Result time: --.