Web & Software Developer

Inserting hidden input Element, Compare Plain JavaScript vs jQuery

Here is a comparison of how to insert an HTML input of type=hidden with plain vanilla JavaScript and with jQuery.

While the plain JavaScript way is more verbose, it takes only the same number of lines as with jQuery.

In both examples, the input element will have the id and name attributes set to someID. In both examples, the input element will be added to form with the id formElementID.

Here is how to insert a hidden input element into an HTML form with plain JavaScript:

var elInput = document.createElement('input');
elInput.setAttribute('type', 'hidden');
elInput.id = 'someID';
elInput.setAttribute('name', 'someID');
elInput.setAttribute('value', 'some value' );
document.getElementById('formElementID').appendChild( elInput );

And here is how to do the same thing, but with jQuery:

$('<input>').attr({
	type: 'hidden',
	id: 'someID',
	name: 'someID',
	value: 'some value'
}).appendTo('#formElementID');

By

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]