Clone element vs jquery create (v3)

Revision 3 of this benchmark created on

Preparation HTML

<div id="container"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var protoString = '<a class="programme" href="{{link}}" id="{{id}}"><span class="title">{{title}}</span><span class="description">{{description}}</span></a>';
var $proto = $('<a class="programme" href="" id=""><span class="title"></span><span class="description"></span></a>');
</script>

Teardown


    $('#container').empty();
   

Test runner

Ready to run.

Testing in
TestOps/sec
Create from string
$(protoString.replace('{{title}}', 'Title')
.replace('{{description}}', 'Description')
.replace('{{id}}', 'id')
.replace('{{link}}', '#'))
.appendTo('#container');
ready
Create with jQuery each time
$proto.clone()
.attr('href', '#')
.attr('id', 'id')
.find('.title').text('Title').end()
.find('.description').text('Description').end()
.appendTo('#container');
ready

Revisions

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