Reflow Demo
HTML
<body>
<button id="btn">Btn</button>
<button id="btndf">Btn Document fragment</button>
<button id="clear">Clear</button>
<div id="wrapper">
</div>
CSS
#wrapper div {
background: red;
display: block;
width: 100px;
height: 100px;
}
JavaScript
var wrapper = document.getElementById("wrapper");
document.getElementById("btn").addEventListener('click',function(){
var n=100;
while(n--){
var inner = document.createElement('div');
inner.innerHTML = "Inner" + n;
wrapper.appendChild(inner);
inner.outerWidth =inner.outerWidth + 1 ;
}
});
document.getElementById("btndf").addEventListener('click',function(){
var df = document.createDocumentFragment();
var n=100;
while(n--){
var inner = document.createElement('div');
inner.innerHTML = "Inner" + n;
df.appendChild(inner);
}
wrapper.appendChild(df);
})
document.getElementById("clear").addEventListener('click', function(){
wrapper.innerHTML = "";
});