Bin-Co > JavaScript > JavaScript Scripts > CreateDOM

CreateDOM - $C() - Create DOM Stuctures Easily

$C() is a function that provides a much easier alternative to W3C DOM's createElement function. You can create DOM sturctures very easily with it. Everyone who have tried their hand at creating a DOM structure using the W3C method knows that it is not easy. It is a piece of cake using innerHTML. But when we try it using W3C methods like document.createElement, we will find that it takes ten times more time. So I have created a small function(>50 lines) to do this in a much easier way.

See Demo

innerHTML

Disadvantages

It is not standard. It's a property that IE introduced that the other browsers also used.
innerHTML is just a string. DOM is not a string, it's a hierarchal structure. The two are not supposed to mix.
One has to escape all the '"' characters in the string - after all the escaping the string becomes rather ugly - and long. Add a lot of plus(+) signs(for string concatenation) to this and we get a unmaintainable mess.

Advantages

Much simpler and easier than the W3C DOM Model.
Can be used to great effect with AHAH - this can't be done using the W3C model.
Faster than the W3C DOM Model

I will never say that you should not use innerHTML(even PPK says that using innerHTML is OK). But if you want to avoid using it, this script will make it easier.

Code


function $C(dom,id) {
	if(!id) var id = "";//The ID argument is optional
	//All necessary HTML tags - make sure not to include any tags that is also a valid attribute name - eg 'cite'
	var valid_tags = ",p,div,span,strong,em,u,img,pre,code,br,hr,a,script,link,table,tr,td,h1,h2,h3,h4,h5,h6,sup,sub,"+
		"ul,ol,li,dd,dl,dt,form,input,textarea,legend,label,fieldset,select,option,blockquote,";//Begining and ending commas are intentional - don't remove them
	var html = new Array();
	var non_alapha = new RegExp(/[^a-zA-Z]+$/);
	for(var tag in dom) {
		var child = false;
		var attributes = dom[tag];

		tag = tag.replace(non_alapha,"");//Remove the numbers at the end
		var ele = document.createElement(tag);
		//If the given attribute is a string, it is a text node
		if(typeof(attributes)== "string") child = document.createTextNode(attributes);
		else if(attributes) {//If it an array...
			for(var att in attributes) {
				var value = attributes[att];
				att = att.replace(non_alapha,"");//Remove the numbers at the end - to solve the problem of non unique indexes
				if(valid_tags.indexOf(","+att+",") != -1) { //If the attribute is a valid tag,
					//Find the dom sturcture of that tag.
					var node = new Object;
					node[att] = value;
					ele.appendChild($C(node,""));// :RECURSION:
				}
				else if(att == "text") child = document.createTextNode(value);//The text in the tag
				else ele.setAttribute(att,value);
			}
		}

		if(child && attributes) ele.appendChild(child);//Append the child if it exists
		html.push(ele);
	}

	if(!id) {//If no node is given, return the created node.(Exits the function)
		if(html.length == 1) return html[0];
		return html;
	}
	//If a node/id was given, append the created elements to that element.
	var node = id;
	if(typeof id == "string") node = document.getElementById(id);//If the given argument is an id.
	for(var i=0;el=html[i],i<html.length;i++) node.appendChild(el);
}

Sample


$C({
	div:{
		'class':'newly-added',//Class must be quoted - its a keyword
		code:'This is a code',
		br:'',
		a:{
			href:'http://www.bin-co.com/',
			text:'This is a link'
		},
		hr:'',
		span:{
			'class':'finally',
			text:'Thats all folks.'
		}
	}
},"insert-here");

This code will create something like....


<div class="newly-added">
<code>This is a code</code>
<br />
<a href="http://www.bin-co.com/">This is a link</a>
<hr />
<span class="finally">Thats all folks.</span>
</div>

Problems

This is a new script - so I have not much problems with it. But I found one - and it is a biggie. You can't use the same tag twice inside an element. I am using a associative array, so the index will be overwritten. This is very troubling if you want to create a list. I have solved this problem - but it is more of a hack than a real solution. The solution involves appending a number to the end of the tag name. An example is given below...

Problem Code


$C({ul:{
	li:"First Item",
	li:"Second Item",
	li:"Third  Item",
}},"insert-here");

Solution


$C({ul:{
	li1:"First Item",
	li2:"Second Item",
	li3:"Third  Item",
}},"insert-here");

License

MIT License.