There are times, where we need to add a new html elements in client-side using javascript or jquery.
Adding a new html element using javascript requires more steps to do.
If there is any ready available javascripts functions, then it will be very easy to use.
Here is the javascript function for append new element to the specified target location.
Here is the javascript function for append new element to the specified target location.
function addElement(tagType, target, parameters) { //Create element if (typeof tagType != 'undefined') var newElement = document.createElement(tagType); //Add parameters if (typeof newElement != 'undefined') { if (typeof parameters != 'undefined') { for (parameterName in parameters) { newElement.setAttribute(parameterName, parameters[parameterName]); } } } //Append element to target if (typeof target != 'undefined') { if (document.getElementById(target) != null) document.getElementById(target).appendChild(newElement); } return newElement; }
Here is the sample to use the above function
addElement('input', "maincontent", {
'id': 'newElementId',
'name': 'newElementName',
'type': 'text',
'value': 'javascript',
'size': '15'
});
The above javascript sample can be changed as jquery plugin. Here is the jquery plugin for append new element to the target.
$.fn.appendNewElement = function addElement(tagType, parameters) { //Create element if (typeof tagType != 'undefined') var newElement = document.createElement(tagType); //Add parameters if (typeof newElement != 'undefined') { if (typeof parameters != 'undefined') { for (parameterName in parameters) { newElement.setAttribute(parameterName, parameters[parameterName]); } } } //Append element to target $(this).append(newElement); return newElement; }
Here is the sample to use the above jquery plugin
$('#maincontent').appendNewElement('input', { 'id': 'newElementId', 'name': 'newElementId', 'type': 'text', 'value': 'jquery', 'size': '15' });
Here is the sample, which uses the above plugins
