JSFiddle - React, Tailwind, and code Playground

by viatropos

HTML

<h1>jQuery delegate performance on large lists</h1>

JavaScript

function addItems(n) {    
  if (!n)
    n = 200;
  var i = 0;
  var html = "";

  for (i; i < n; i++) {
    //html += "<div class='post'><h2 class='title'>Title</h2><p class='body'><span class='first'>H</span>ello world</span></p></div>\n";
    html += "<article class='article'> \
    <figure class='snapshot' role='img'><time class='availability dtstart' datetime='2011-05-22T00:00:00-07:00' title='2011-05-22T00:00:00-07:00'>$125 Value<span class='value-title' title='2011-05-22T00:00:00-07:00'></span></time><a href='/1195?post_id=1081' class='popup logo' data-ajax='false' data-post-id='1081'><span></span><img alt='Article Title' class='photo' src='http://google.com' title='Article Title' /></a> \
      <a href='/posts/1081' class='status'>Likes</a> \
    </figure> \
    <section class='details'> \
      <header class='header'> \
        <hgroup> \
          <h3> \
            <a href='/1195?post_id=1081' class='popup' data-post-id='1081'>Article Title</a><span class='hyphen'>-</span><span class='distance'>Moun</span> \
          </h3> \
          <h2 class='title'><span class='quotation-mark'>&ldquo;</span><a href='/1195/posts/1081' class='url summary'>Date night for only $60</a><span class='quotation-mark'>&rdquo;</span><span class='hyphen grey'>-</span><time class='expiration-date dtend' datetime='2011-06-27T00:00:00-07:00'><span class='value-title' title='2011-06-27T00:00:00-07:00'>Expires 06/27/11</span></time></h2> \
        </hgroup> \
      </header> \
      <p class='description' itemprop='description'>aksjdacoisdjfoiajdsoifjoiadjfoiasjdfoiasdjfioasdfjiaosd.</p> \
      <footer class='footer'> \
        Tags: <a href='/posts/code' class='category' itemprop='category' rel='tag' target='_top'>Code</a>, <a href='/posts/code/ruby' class='category' itemprop='category' rel='tag' target='_top'>Ruby</a>, <a href='/posts/code/javascript' class='category' itemprop='category' rel='tag' target='_top'>Javascript</a> \
      </footer> \
    </section> \
  </article>"
 ...