text vs jquery

Benchmark created on

Description

faster dom creates

Preparation HTML

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

<div id=fillme></div>

Test runner

Ready to run.

Testing in
TestOps/sec
jquery
id = 2;
size=20;
required="required";
var x = $('<input type="text">').attr('id', 'Field' + id).attr('name', 'Field' + id).attr("size", size).addClass("required");
ready
text (concat param)
id = 2;
size=20;
required="required";
var x = $('<input type="text" id="Field'+id+'" name="Field'+id+'" size="'+size+'" class="'+required+'">');
 
ready
text (replace param)
id = 2;
size=20;
required="required";
s = '<input type="text" id="Field#ID name="Field#ID" size="#size" class="#CLASS">';
s.replace(/#ID/g, id);
s.replace(/#size/g, size);
s.replace(/#CLASS/g, required);
var x = $(s);
ready
text (join param)
id = 2;
size=20;
required="required";
t = [];
t[0] ='<input type="text" id="Field';
t[1] = id;
t[2] = '" name="';
t[3] = id;
t[4] = '" size="';
t[5] = size
t[6] = '" class="';
t[7] = required;
var x = $(t.join(''));

 
ready
text (concat)
id = 2;
size=20;
required="required";
var s;
s ='<input type="text" id="Field';
s+= id;
s+= '" name="';
s+= id;
s+= '" size="';
s+= size;
s+= '" class="';
s+= required;
s+= '">';
var x = $(s);
ready

Revisions

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