JSFiddle - React, Tailwind, and code Playground

by bodine30

HTML

<div class="foo"></div>

CSS

.foo {width:10px; height:10px; margin:1em; background-color:red;}
[data-before]:before, [data-after]:after {width: 200px;display: block;margin: 1em;}
[data-before]:before {content:attr(data-before);color: red;}
[data-after]:after {content:attr(data-after);color: green;}

JavaScript

var staticList = $('.foo'),
    liveList = document.getElementsByClassName('foo'),
    docFrag = "",
    longClassNames = "";

$.each((new Array(1000)), function(i){
    longClassNames += (" el"+i);
    docFrag += ("<div class='"+longClassNames+"'></div>");
});

$('<div/>', {
    "class":"report foo",
    "data-before":"staticList.length = " + staticList.length + " liveList.length = " + liveList.length
})
.appendTo('body')
.attr("data-after","staticList.length = " + staticList.length + " liveList.length = " + liveList.length);

debugger;

$('body').append(docFrag);

console.log(docFrag, longClassNames);