There are a certain number of stock JavaScript functions which I tend to use on most projects. Normally I’ll create a function if a task needs to be carried out quite a few times. So, here we have a newElement function, a style function and a toggleVisibility function. It’s pretty obvious what each of them do…

Create new elements

The newElement function is used to create new DOM elements - it does NOT inject these newly created elements into the DOM so you’ll have to do that yourself.

function newElement(elementName,text,attributes) {
	if(typeof elementName != "string" || typeof attributes != "object") return;
	var element = document.createElement(elementName);
	element.appendChild(document.createTextNode(text));
	for( var i in attributes ) {
		element[i] = attributes[i];
	}
	return element;
}

It takes three arguments, an elementName (such as, "div", "a","input" etc.), an attributes object which is a little time-saving addition I made, and text (which will be appended within the newly created element.

So, if you wanted to create a new short paragraph with a class of "important", a title of "summary" and some text inside it then you could do this:

var myNewElement = newElement('p','some text inside',{className: 'important', title: 'summary'});

When adding attributes make sure that you use the proper reference. So, if you want to add a class you cannot use class:'important' - you have to use className:'important' instead.

Style your elements

The style function is really useful for adding a large amount of CSS styles to an element. Most of the time you should just add a class and have the corresponding CSS rules defined in your StyleSheet but for when that’s not possible, you can use this:

function style(elementReference,styles) {
	if(typeof elementReference != "object") return;
	if (typeof styles == "string") {
		styles = styles.split(';');
		for (var i = 0; i < styles.length; ++i) {
			elementReference.style[styles[i].split(':')[0]] = styles[i].split(':')[1];
		}
	}
	else 
		if (typeof styles == "object") {
			if (styles[0]) {
				for (var i = 0; i < styles.length/2; ++i) {
					elementReference.style[styles[i]] = styles[++i];
				}
			} else {
				for (var i in styles) {
					elementReference.style[i] = styles[i];
				}
			}
		}
}

This function takes two arguments, an elementReference and the styles object/string. So, there are three ways of using it:

This:

var elem = document.getElementById('elemID');
style(elem,['color','blue','padding','5px']);

Or: (this is my preferred way)

var elem = document.getElementById('elemID');
style(elem,{
	color: 'blue',
	padding: '5px'
});

Or:

var elem = document.getElementById('elemID');
style(elem,'color:blue;padding:5px;');

The style function has been especially useful to me in my GreaseMonkey scripts. On most projects I tend to just create a class within CSS and apply it to the element when I need it, - sometimes this won’t be possible, for example, if you don’t have access to the StyleSheet - in such situations this function becomes incredibly useful!

Toggle the visbility of an element

The toggleVisibility function is pretty basic, it just shows or hides elements dependent on their current state. - So if an element is hidden when you initiate the function then it will be shown and vice versa.

Here it is:

function toggleVisibility(elementReference) {
	var e = elementReference;
	if(!e || typeof e != "object") return;
	e.style.display = (e.style.display==='none') ? 'block' : 'none';
}

And this is how you use it:

var elem = document.getElementById('elemID');
elem.onclick = function() {
	var something = document.getElementById('something');
	toggleVisibility(something); // so simple...
}

All of the above functionality can be gained from utilising one of the many available JavaScript libraries but if you’re not planning to use a library because you find them unnecessary or bloated then the above functions might be of some use to you.