Необходимо ли добавить HTML к DOM, использующему innerHTML или путем создания новых элементов один за другим?

Существует два метода для добавления кода HTML к DOM, и я не знаю то, что является лучшим способом сделать это.

Первый метод

Первым путем является легкий, я мог просто добавить код HTML (с jQuery) использование $('[code here]').appendTo(element); который является во многом как element.innerHTML = [code here];

Второй метод

Иначе должен создать все элементы один за другим как:

// New div-element
var div = $('
', {
              id: 'someID',
              class: 'someClassname'
          });

// New p-element that appends to the previous div-element
$('
', {
    class: 'anotherClassname',
    text: 'Some textnode',
}).appendTo(div);

Этот метод использует базовые функции как document.createElement и element.setAttribute.

Когда я должен использовать первый метод и когда второе? Метод два быстрее, чем метод один?

Редактирование - Результат тестов скорости

Я сделал три теста скорости, от которых следует код:

$(document).ready(function(){
    // jQuery method - Above mentioned as the second method
    $('#test_one').click(function(){
        startTimer();
        var inhere = $('#inhere');
        for(i=0; i<1000; i++){
            $(inhere).append($('
', {'class': 'anotherClassname' + i, text: 'number' + i}));
        }
        endTimer();
        return false;
    });

    // I thought this was much like the jQuery method, but it was not, as mentioned in the comments
    $('#test_two').click(function(){
        startTimer();
        var inhere = document.getElementById('inhere');
        for(i=0; i<1000; i++){
            var el = document.createElement('p')
            el.setAttribute('class', 'anotherClassname' + i);
            el.appendChild(document.createTextNode('number' + i));
            inhere.appendChild(el);
        }
        endTimer();
        return false;
    });

    // This is the innerHTML method
    $('#test_three').click(function(){
        startTimer();
        var inhere = document.getElementById('inhere'), el;
        for(i=0; i<1000; i++){
            el += '
number' + i + '
';
        }                
        inhere.innerHTML = el;
        endTimer();
        return false;
    });
});

Который дал следующие действительно неожиданные результаты

               Test One   Test Two   Test Three  
+-------------+---------+----------+------------+
| Chrome    5 | ~125ms  |  ~10ms   |   ~15ms    |
| Firefox 3.6 | ~365ms  |  ~35ms   |   ~23ms    |
| IE        8 | ~828ms  |  ~125ms  |   ~15ms    |
+-------------+---------+----------+------------+

В целом, innerHTML метод, кажется, самый быстрый и является во многих случаях самым читаемым.