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