What does it DO?

js2dom contains two global functions, js2html and js2xhtml, that receive a JavaScript object and attempt to spit it back out as a string of HTML.

API

What's the difference between js2html and js2xhtml?

js2xhtml closes unary tags such as img like <img /> instead of <img>. Note that js2html still properly excludes unary closing tags. i.e., img becomes <img> and not <img></img>

var myElement = {
   tag: 'img',
   src: 'http://my.example.com/img.jpg'
};

var html = js2xhtml(myElement);

console.log(html);
// prints '<img src="http://my.example.com/img.jpg" />'

var myElement = {
   tag: 'img',
   src: 'http://my.example.com/img.jpg'
};

var html = js2html(myElement);

console.log(html);
// prints '<img src="http://my.example.com/img.jpg">'

Given an object:

Returns back an HTML string with a single top-level element.

• The tag property identifies which HTML tag to generate. If no tag is given, div is assumed.
• The content property is another object or array of objects to be recursively interpreted.
• All other properties of the supplied object become attibutes of the resulting HTML tag, with their values being the attribute values.

Given an array:

The same as if it where given an object, but returns back an HTML string with several top-level elements.

Given a function:

Returns an empty string.

Given anything else:

Returns what you gave it.

Example

var json = {
   "class":"control-group",
   content: {
      tag: 'input',
      type: 'text',
      value: '1234',
      name: 'quantity',
      id: 'quantity_id'
   }
}
var html = js2html(json);
// html = '<div class="control-group"><input type="text" value="1234" name="quantity" id="quantity_id"></div>'