jQuery creation methods

Benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="test-holder"></div>

Teardown


    $('#test-holder').empty();

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery HTML string
$('#test-holder').append('<div id="myDiv" class="nice-div" style="background-color: goldenRod">Hello world!</div>');
ready
jQuery HTML string, append
var myElement = $('<div id="myDiv" class="nice-div" style="background-color: goldenRod">Hello world!</div>');
$('#test-holder').append(myElement);
ready
jQuery HTML tag and object
var myElement = $('<div>', {
                    id: 'myDiv',
                    class: 'nice-div',
                    css: {
                      'background-color': 'goldenRod'
                    },
                    text: 'Hello world!'
});
$('#test-holder').append(myElement);
ready
jQuery separate statements
var myElement = $('<div>')
myElement.attr('id', 'myDiv');
myElement.addClass('nice-div');
myElement.css({'background-color': 'goldenRod'});
myElement.text('Hello world!');
$('#test-holder').append(myElement);
ready
Native JavaScript
var myElement = document.createElement('div');
myElement.id = 'myDiv';
myElement.appendChild(document.createTextNode('Hello world!'));
myElement.className = 'nice-div';
myElement.style['background-color'] = 'goldenRod';
document.getElementById('test-holder').appendChild(myElement);
ready

Revisions

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