counter-examples.md

Counter-examples to the README

This is pretty much exactly what cre does under the hood.

The Tabalanche stuff

Here's what the first two examples in README.md would look like without cre:

var templateTabIcon = document.createElement('img');
templateTabIcon.className = 'tabicon';
var templateTabLink = document.createElement('a');
templateTabLink.className = 'tablink';
var templateTabListItem = document.createElement('li');
templateTabListItem.className = 'tablist-item';
var templateTabStash = document.createElement('div');
templateTabStash.className = 'tabgroup tabstash';
var templateFlap = document.createElement('div');
templateFlap.className = 'flap';
var templateTabList = document.createElement('ul');
templateTabList.className = 'tablist';

function createTabListItem(tab) {
  var tabIcon = templateTabIcon.cloneNode();
  tabIcon.src = tab.icon || platform.faviconPath(tab.url);

  var tabLink = templateTabLink.cloneNode();
  tabLink.href = tab.url;
  tabLink.appendChild(tabIcon);
  tabLink.appendChild(document.createTextNode(tab.title));

  var listItem = templateTabListItem.cloneNode();
  listItem.appendChild(tabLink);

  /* (event listeners ommitted for brevity) */

  return listItem;
}

(The only real difference between this and what cre does is that cre creates a document framgent and appends the two children of tabLink to that, then appends the document fragment to tabLink, because appending to an element is more intensive than appending to a document fragment and it's best to do it as few times as possible.)

The text node example

The non-cre version of var statusMessage = cre([' This message will self-destruct in five seconds.']) is pretty straightforward, just a little more verbose of a function name:

var statusMessage = document.createTextNode(' This message will self-destruct in five seconds.')

These two lines are equivalent, and if you don't have any other need for cre in your project, I'd use the latter.

Creating a document fragment

The payItForwardWarning function in vanilla JS is about eight times as verbose, but still pretty simple:

function payItForwardWarning(favorCount) {
  var intermediateFragment = document.createDocumentFragment();
  intermediateFragment.appendChild(document.createTextNode('You have '));
  var intermediateElement = document.createElement('span');
  intermediateElement.className = 'favor-count';
  intermediateElement.textContent = favorCount * 3;
  intermediateFragment.appendChild(intermediateElement);
  intermediateFragment.appendChild(document.createTextNode(' favors to pay forward'));
  return intermediateFragment;
}