DOM vs innerHTML vs jQuery DOM vs jQuery HTML (v5)

Revision 5 of this benchmark created on


Preparation HTML

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

<script>
  /**
   * Building in JS:
   <form method="post" action="/">
     <div class="form-textfield-wrapper">
       <label for="edit-name">First Name <span class="required">*</span></label>
       <input id="edit-name" name="name" class="form-textfield" required="required" spellcheck="false">
     </div>
     <div class="form-textfield-wrapper">
       <label for="edit-lname">Last Name <span class="required">*</span></label>
       <input id="edit-lname" name="last_name" class="form-textfield" required="required" spellcheck="false">
     </div>
     <div class="form-ops-wrapper">
       <input id="edit-submit" value="Submit" class="form-op" type="submit">
     </div>
   </form>
  */
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
var form = document.createElement('form');
form.action = '/';
form.method = 'post';
form.innerHTML='<div class="form-textfield-wrapper"><label for="edit-name">First Name <span class="required">*</span></label><input id="edit-name" name="name" class="form-textfield" required="required" spellcheck="false"></div><div class="form-textfield-wrapper"><label for="edit-lname">Last Name <span class="required">*</span></label><input id="edit-lname" name="last_name" class="form-textfield" required="required" spellcheck="false"></div><div class="form-ops-wrapper"><input id="edit-submit" value="Submit" class="form-op" type="submit"></div>';
ready
pure DOM
var form = document.createElement('form'), div, input, label, span;
form.action = '/';
form.method = 'post';

div = document.createElement('div');
div.className = 'form-textfield-wrapper';
label = document.createElement('label');
//label.for = 'edit-name';
label.setAttribute('for', 'edit-name');
label.appendChild(document.createTextNode('First Name '));
span = document.createElement('span');
span.className = 'required';
span.appendChild(document.createTextNode('*'));
label.appendChild(span);
input = document.createElement('input');
input.id = 'edit-name';
input.name = 'name';
input.required = 'required';
input.spellcheck = 'false';
input.className = 'form-textfield';
div.appendChild(label);
div.appendChild(input);
form.appendChild(div);

div = document.createElement('div');
div.className = 'form-textfield-wrapper';
label = document.createElement('label');
//label.for = 'edit-lname';
label.setAttribute('for', 'edit-lname');
label.appendChild(document.createTextNode('Last Name '));
span = document.createElement('span');
span.className = 'required';
span.appendChild(document.createTextNode('*'));
label.appendChild(span);
input = document.createElement('input');
input.id = 'edit-lname';
input.name = 'lname';
input.required = 'required';
input.spellcheck = 'false';
input.className = 'form-textfield';
div.appendChild(label);
div.appendChild(input);
form.appendChild(div);

div = document.createElement('div');
div.className = 'form-ops-wrapper';
input = document.createElement('input');
input.id = 'edit-submit';
input.value = 'Submit';
input.className = 'form-op';
input.type = 'submit';
div.appendChild(input);
form.appendChild(div);
ready
jQuery string
$('<form method="post" action="/"><div class="form-textfield-wrapper"><label for="edit-name">First Name <span class="required">*</span></label><input id="edit-name" name="name" class="form-textfield" required="required" spellcheck="false"></div><div class="form-textfield-wrapper"><label for="edit-lname">Last Name <span class="required">*</span></label><input id="edit-lname" name="last_name" class="form-textfield" required="required" spellcheck="false"></div><div class="form-ops-wrapper"><input id="edit-submit" value="Submit" class="form-op" type="submit"></div></form>');
ready
jQuery elements
var $form = $('<form/>').attr('method', 'post').attr('action', '/');

var $div = $('<div/>').addClass('form-textfield-wrapper');
var $label = $('<label/>').attr('for', 'edit-name');
$label.text('First Name ');
$label.append($('<span/>').addClass('required').text('*'));
var $input = $('<input/>').attr('id', 'edit-name').attr('name', 'name').addClass('form-textfield').attr('required', true).attr('spellcheck', 'false');
$div.append($label, $input);
$form.append($div);

$div = $('<div/>').addClass('form-textfield-wrapper');
$label = $('<label/>').attr('for', 'edit-lname');
$label.text('Last Name ');
$label.append($('<span/>').addClass('required').text('*'));
$input = $('<input/>').attr('id', 'edit-lname').attr('name', 'lname').addClass('form-textfield').attr('required', true).attr('spellcheck', 'false');
$div.append($label, $input);
$form.append($div);

$div = $('<div/>').addClass('form-ops-wrapper');
$input = $('<input/>').attr('id', 'edit-submit').addClass('form-op').attr('type', 'submit').val('Submit');
$div.append($input);
$form.append($div);
ready
part jQuery
var form = document.createElement('form'), div, label, input;
form.method = 'post';
form.action = '/';

div = document.createElement('div');
$(div).addClass('form-textfield-wrapper');
label = document.createElement('label');
$(label).attr('for', 'edit-name').html('First Name <span class="required">*</span>');
input = document.createElement('input');
input.name = 'name';
input.id = 'edit-name';
input.required = 'required';
input.spellcheck = 'false';
$(input).addClass('form-textfield');
$(div).append(label, input);
$(form).append(div);

div = document.createElement('div');
$(div).addClass('form-textfield-wrapper');
label = document.createElement('label');
$(label).attr('for', 'edit-lname').html('Last Name <span class="required">*</span>');
input = document.createElement('input');
input.name = 'lname';
input.id = 'edit-lname';
input.required = 'required';
input.spellcheck = 'false';
$(input).addClass('form-textfield');
$(div).append(label, input);
$(form).append(div);

div = document.createElement('div');
$(div).addClass('form-ops-wrapper');
input = document.createElement('input');
input.id = 'edit-submit';
input.type = 'submit';
$(input).val('Submit').addClass('form-op');
$(div).append(input);
$(form).append(div);
ready

Revisions

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