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);
}
document.getElementById('result').innerHTML = ''; // empty

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;';


var oldnode = document.getElementById('result2'),
    clone = oldnode.cloneNode(true);

startTimeStamp2 = new Date().getTime();
for (var j = 0; j < 100000; j++) {
    clone.innerHTML = ''; // empty
    p = document.createElement('p');
    t = document.createTextNode('paragraph');
    p.appendChild(t);
    clone.appendChild(p);
}
oldnode.parentNode.replaceChild(clone, oldnode);
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>