Inserting DOM - Performance

Inserting DOM - Performance

We use a lot of dom creation/insertion for some pages, and I did a small test case here:
  1. $(document).ready(function() {
        console.time('create list');
        var list = $('#mylist');
        var contents = '';
        for (i = 0; i < 10000; i++) {
            contents += '<li>Test!</li>';
        }
        list.html(contents);
        console.timeEnd('create list');
       
        console.time('create list v2');
        var list = $('#mylist2');
        var contents = '';
        for (i = 0; i < 10000; i++) {
            contents += '<li>Test v2!</li>';
        }
        list.html('<ul>' + contents + '</ul>');
        console.timeEnd('create list v2');
       
        console.time('create list v3');
        var list = $('<ul>', {
            id: 'mylist3ul'
        });
        for (i = 0; i < 10000; i++) {
            list.append($('<li>', {
                text: 'List item v3!'
            }));
        }
        $('#mylist3').append(list);
        console.timeEnd('create list v3');
    });





























  2. <div style="float:left; width:50%">
        <ul id="mylist">

        </ul>
    </div>
    <div id="mylist2">

    </div>
    <div id="mylist3"></div>








Version 2 is by far the fastest, by storing in a string and then just inserting a single UL element... and the third method is using some of the newer functionality of "jquery dom creation" which is by far the slowest. Why did jQuery create this if it is so inefficient? Am I missing something?