I wrote this cute lil' JS function for creating DOM elements. It uses key => value maps to apply styles and attributes to the element and can also set its innerHTML.
function create(a, b, c, d){
var x = document.createElement(a);
for (i in b){
if (b.hasOwnProperty(i)) {
x.style[i] = b[i];
}
}
for (i in c){
x[i] = c[i];
}
}
x.innerHTML = d || null;
return x;
}
Here's an example of its usage, where I'm creating a span element with a set of specific CSS styles and the contents of a variable as its innerHTML.
var wrapper = create("span", {padding: "7px", paddingBottom: "0px", fontFamily: "Arial", color: "#000000", fontSize: "33px"}, null, contents);
If I wanted to, I could just give it a class instead, which would apply these styles from my stylesheet or whatever.
var wrapper = create("span", null, {className: "content_wrapper"}, contents);
This object can then be added to the DOM with a simple appendChild function.
The function can be altered a little bit to skip assigning it as a JS object and automatically just append the nameless element to a parent, but this isn't necessarily a better system.
function create(a, b, c, d, e){
var x = document.createElement(a);
for (i in b){
if (b.hasOwnProperty(i)) {
x.style[i] = b[i];
}
}
for (i in c){
if (c.hasOwnProperty(i)) {
x[i] = c[i];
}
}
x.innerHTML = d || null;
e.appendChild(x);
}
create("span", null, {className: "content_wrapper"}, contents, parent_element);