# 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`:

```js
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';
```

```js
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:

```js
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:

```js
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;
}
```