Закачане във DocumentFragment и накрая в родител, присъстващ в DOM дървото мисля, че е най-добрият вариант, така че по-скоро 1), но така написано както е в поуста ти постоянно ще престроява дървото и ще забави изпълнението.

Предполагам, че първият начин има известен овърхед, тъй като създаваш обекти, които ти се пазят в текущата сесия. Докато при втория - просто пишеш HTML.

Това обаче не е фактор и бих предпочел първия вариант.

Сещам се в момента за една сериозна причина, и тя е ако генерираме атрибутите динамично. В твоя пример такъв проблем няма. Но би имало в:

for (var i = 0; i < 10; i++) {
    document.body.innerHTML('<div id="myId' + 
    ((Math.random() * 100) + i) + '"></div>');
}

Ако впоследствие искаш да правиш нещо с тези див-ове ще трябва отново да итерираш около дивовете в боди-то, за да ги извадиш като елементи и да им добавиш примерно клас.

Т.е. когато елементите се генерират с неизвестни атрибути, примерно входни данни, или идват от някаква колекция с атрибути, по-добре да ги изнесеш в предварително създадени обекти, за да имаш контрол над тях, вместо да си усложняваш живота след това с ненормални цикли :) Ако е просто plain html, при който си абсолютно наясно какво добавяш, мисля че е оправдано да се ползва innerHTML()/load()