aerith/javascript-yuphonia.js

## javascript-yuphonia.js
/*
 *  Use like below
 *
 *  var div = Hoge.create('div', {id: 'hoge'})
 *    .create('ul')
 *      .create('li')
 *      .end()
 *      .create('li')
 *      .end()
 *      .create('li')
 *      .end()
 *    .end()
 *  .end()
 *
 *  document.body.appendChild(div.root());
 *
 */

function Yuphonia () {
	if (this instanceof Yuphonia) {
		return this.initialize.apply();
	}

	return new Yuphonia();
}

Yuphonia.prototype = {
	_root: null,
	_stack: [],

	initialize: function () {
		this._root = null;
		this._stack = [];
	},

	create: function (name, attributes) {
		var element = Yuphonia.createElement(name, attributes);

		this._append(element);

		return this;
	},

	end: function () {
		if (this._stack.length > 1) {
			this._stack.pop();
		}

		return this;
	},

	get: function () {
		return this._stack[this._stack.length - 1];
	},

	root: function () {
		return this._root;
	},

	_append: function (element) {
		if (this._root === null) {
			this._root = element;
		}

		if (this._stack.length > 0) {
			this._stack[this._stack.length - 1].appendChild(element);
		}

		this._stack.push(element);
	}

}

Yuphonia.create = function (name, attributes) {
	var yuphonia = new Yuphonia();
	var element = Yuphonia.createElement(name, attributes);

	yuphonia._append(element);

	return yuphonia;
}

Yuphonia.createElement = function (name, attributes) {
	var element = document.createElement(name);

	if (attributes instanceof Object) {
		Yuphonia.setupAttributes(element, attributes);
	} else if (attributes) {
		var attributes = Yuphonia.buildAttributes(attributes.toString());
		Yuphonia.setupAttributes(element, attributes);
	}

	return element;
}

Yuphonia.setupAttributes = function (element, attributes) {
	for (var name in attributes) {
		if (!attributes.hasOwnProperty(name)) continue;

		var value = attributes[name];

		switch (name) {
			case 'class':
			case 'className':
				element.className = value;
				break;

			case '@TEXT':
				element.appendChild(document.createTextNode(value));
				break;

			default:
				element.setAttribute(name, value);
				break;
		}
	}
}

Yuphonia.buildAttributes = function (value) {
	var result = {};
	var pieces = value.split('&');

	for (var i = 0, l = pieces.length; i < l; i++) {
		var pair = pieces[i].split('=', 2);
		var name = pair[0];
		var value = pair[1];

		result[name] = value;
	}

	return result;
}

## test.html
<html>
<body>
<script type="text/javascript" src="javascript-yuphonia.js"></script>
<script type="text/javascript">

   var div = Yuphonia.create('div', {id: 'hoge'})
     .create('ul')
       .create('li', '@TEXT=foo')
       .end()
       .create('li', '@TEXT=bar')
       .end()
       .create('li', '@TEXT=baz')
       .end()
     .end()
     .create('span', '@TEXT=fuga')
     .end()
   .end()

  document.body.appendChild(div.root());

</script>
</body>
</html>
	/*
	* Use like below
	*
	* var div = Hoge.create('div', {id: 'hoge'})
	* .create('ul')
	* .create('li')
	* .end()
	* .create('li')
	* .end()
	* .create('li')
	* .end()
	* .end()
	* .end()
	*
	* document.body.appendChild(div.root());
	*
	*/

	function Yuphonia () {
	if (this instanceof Yuphonia) {
	return this.initialize.apply();
	}

	return new Yuphonia();
	}

	Yuphonia.prototype = {
	_root: null,
	_stack: [],

	initialize: function () {
	this._root = null;
	this._stack = [];
	},

	create: function (name, attributes) {
	var element = Yuphonia.createElement(name, attributes);

	this._append(element);

	return this;
	},

	end: function () {
	if (this._stack.length > 1) {
	this._stack.pop();
	}

	return this;
	},

	get: function () {
	return this._stack[this._stack.length - 1];
	},

	root: function () {
	return this._root;
	},

	_append: function (element) {
	if (this._root === null) {
	this._root = element;
	}

	if (this._stack.length > 0) {
	this._stack[this._stack.length - 1].appendChild(element);
	}

	this._stack.push(element);
	}

	}

	Yuphonia.create = function (name, attributes) {
	var yuphonia = new Yuphonia();
	var element = Yuphonia.createElement(name, attributes);

	yuphonia._append(element);

	return yuphonia;
	}

	Yuphonia.createElement = function (name, attributes) {
	var element = document.createElement(name);

	if (attributes instanceof Object) {
	Yuphonia.setupAttributes(element, attributes);
	} else if (attributes) {
	var attributes = Yuphonia.buildAttributes(attributes.toString());
	Yuphonia.setupAttributes(element, attributes);
	}

	return element;
	}

	Yuphonia.setupAttributes = function (element, attributes) {
	for (var name in attributes) {
	if (!attributes.hasOwnProperty(name)) continue;

	var value = attributes[name];

	switch (name) {
	case 'class':
	case 'className':
	element.className = value;
	break;

	case '@TEXT':
	element.appendChild(document.createTextNode(value));
	break;

	default:
	element.setAttribute(name, value);
	break;
	}
	}
	}

	Yuphonia.buildAttributes = function (value) {
	var result = {};
	var pieces = value.split('&');

	for (var i = 0, l = pieces.length; i < l; i++) {
	var pair = pieces[i].split('=', 2);
	var name = pair[0];
	var value = pair[1];

	result[name] = value;
	}

	return result;
	}
	<html>
	<body>
	<script type="text/javascript" src="javascript-yuphonia.js"></script>
	<script type="text/javascript">

	var div = Yuphonia.create('div', {id: 'hoge'})
	.create('ul')
	.create('li', '@TEXT=foo')
	.end()
	.create('li', '@TEXT=bar')
	.end()
	.create('li', '@TEXT=baz')
	.end()
	.end()
	.create('span', '@TEXT=fuga')
	.end()
	.end()

	document.body.appendChild(div.root());

	</script>
	</body>
	</html>