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

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>';

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);

$('<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>');

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);

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);