Nice benchmark, but it misses the point.

Yes, it's faster to create DOM elements in string form rather than one-by-one, attribute-by-attribute.

However, creating DOM structure in code sucks. It's far better (and faster) to create markup and deal with templates by compiling HTML files into strings in JavaScript files and then turn those strings into DOM structure when needed.

Once you create DOM fragments from singular, compiled strings, you can perform data binding.

So, instead of this (from your benchmark):

  var $dropdown = $('<select class="s">');

  $u.find('a').each(function() {
    var $a = $(this);

    $('<option>').html($a.text()).attr('value', $a.attr('href')).appendTo($dropdown);
  });

think of this:

  <select class="s" data-binding="{@source: aElements}">
    <option data-binding="{@template-for: aElements}{value: href}{@text: aText}">
  </select>

Consider "aElements" to be the collection of anchors, and "aText" to be an attribute of each anchors. These would be members in a model.

Writing markup to represent the presentation of data, and code to represent the logic of business is far superior to writing code that does both!