Returning Function Calls from an Array within a JavaScript Function

Question

I'd like to use JavaScript to generate HTML.

I've made a JavaScript function object that has two parameters; a string and generic object. The string is used to specify the type of HTML element you want to generate and the generic object is a container for key value pairs specifying the element's attributes -- or a string for simple elements like paragraphs containing only text that needs no id or class specification.

I'm drafted some functions that generate some HTML elements. I then contained the functions in an array that is a local variable of a function called html.

When html is called with appropriate arguments (e.g. html("element", {id:"myElement"})), a string of HTML text is returned.

I wonder what the drawbacks of the approach are. More specifically, is there a better method to achieve the same results?

var html = function (type, spec={}) {
 html_element = [];
 html_element["table"] = function() {
 markup = "<table>";
 if (spec.cols) 
 {
 markup += "<tr>";
 for (value in spec.cols)
 markup += "<th>" + spec.cols[value] + "</th>";
 markup += "</tr>";
 }
 while (spec.rows.length)
 {
 markup += "<tr>";
 for (data in (row = spec.rows.shift()))
 markup += "<td>" + row[data] + "</td>";
 markup += "</tr>";
 }
 return markup += "</table>";
 };
 html_element["button"] = function() {
 if (spec.hasOwnProperty("value")) value = spec.value;
 else value = "";
 return "<button id=\"" + id + "\">" + value + "</button>";
 };
 html_element["p"] = function() {
 if (typeof spec === Object) text = spec.text;
 else text = spec;
 return "<p id=\"" + id + "\">" + text + "</p>";
 };
 ...
 return html_element[type]();
}

Answer 1

Normally, is a good practice create sub functions instead of add all on an array.

var button = function() {
};

Always use var in front of the variables to scope to the context. (good practice).

A good choice is take advantage of the evaluation of data types on javascript, for variables.

var variable = paramValue || "defaultValue";

this evaluates paramaValue, if is true, is assigned, if not, assign "defaultValue"

Also, if is possible, considere use a template engine like:

• http://handlebarsjs.com
• http://mustache.github.io

Final Code