JSFiddle - React, Tailwind, and code Playground

by lichangwei

HTML

<div id="result"></div>
<div id="parent"></div>

JavaScript

$(function(){
    var parent = document.getElementById('parent');
    var result = document.getElementById('result');
    
    var string = '';
    for(var i = 0; i < 1000; i++){
        string += '<p>' + i + '</p>';
    }
    parent.innerHTML = string;
    
    var t1 = new Date();
    var children = parent.children;
    for(var i = 0, len = children.length; i < len; i++){
        children[i].innerHTML = i + 1;
    }
    var t2 = new Date();
    var node = parent.firstChild;
    var i = 0
    while(node){
        node.innerHTML = ++i;
        node = node.nextSibling;    
    }
    var t3 = new Date();
    parent.innerHTML = '';
    result.innerHTML = 'Loop 1000 p elements with for: ' + (t2-t1) + ', while: ' + (t3-t2);
})