Edit in JSFiddle

var startTimeStamp = new Date().getTime(),
    startTimeStamp2,
    duration, duration2, frag;

for (var i = 0; i < 100000; i++) {
    document.getElementById('result').innerHTML = ''; // empty
    p = document.createElement('p');
    t = document.createTextNode('paragraph');
    p.appendChild(t);
    document.getElementById('result').appendChild(p);
}

duration = new Date().getTime() - startTimeStamp; // javascript benchmark - difference between start and end time in milliseconds
document.getElementById('log').innerHTML = 'Operation with 100,000 DOM manipulation in the loop lasts ' + duration + ' milliseconds;';

startTimeStamp2 = new Date().getTime();
frag = document.createDocumentFragment();
for (var j = 0; j < 100000; j++) {
    document.getElementById('result2').innerHTML = ''; // empty
    p = document.createElement('p');
    t = document.createTextNode('paragraph');
    p.appendChild(t);
    frag.appendChild(p);
}
document.getElementById('result2').appendChild(frag);
document.getElementById('result2').innerHTML = ''; // empty

duration2 = new Date().getTime() - startTimeStamp2; // javascript benchmark - difference between start and end time in milliseconds
document.getElementById('log2').innerHTML = 'Operation with DOM manipulation using offline fragment outside the loop lasts ' + duration2 + ' milliseconds;';
<p id="log">log</p>
<p id="result">result</p>
<p id="log2">log 2</p>
<p id="result2">result 2</p>