Clone element vs jquery create

Benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="container"></div>
<script>
  var elementsToCreate = 1;
  var container = $('#container');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Create from string
var protoString = '<a class="programme" href="{{link}}" id="{{id}}"><span class="title">{{title}}</span><span class="description">{{description}}</span></a>';

while (elementsToCreate--) {
 var clone = $(protoString.replace('{{title}}', 'Title ' + elementsToCreate).replace('{{description}}', 'Description ' + elementsToCreate).replace('{{id}}', 'id' + elementsToCreate).replace('{{link}}', '#' + elementsToCreate)).appendTo(container);
}
ready
Create with jQuery each time
while (elementsToCreate--) {
 var programme = $('<a/>', {
  className: 'programme',
  href: '#' + elementsToCreate,
  id: 'id' + elementsToCreate
 });
 var title = $('<span/>', {
  className: 'title',
  text: 'Title ' + elementsToCreate
 }).appendTo(programme);
 var description = $('<span/>', {
  className: 'description',
  text: 'Description ' + elementsToCreate
 }).appendTo(programme);
 container.append(programme);
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.