sb.element

Creating elements dynamically with sb.element is easy and it works the same in all broswers - wowsers! Every type of element is created the same way making it quick to learn. The basic syntax involves passign an object with parameters to the sb.element function. Sb.element instances have a multitude of built in methods which can all be found in the reference docs. Here I am just going to go over the basics. Any properties of the parameter object get passed to the standard DOM node that is returned. It can be used with the usual appendChild, insertBefore or it you can use the appending functions built right into an sb.element instance such as appendTo, appendBefore and others. See the docs for more details

Creating a simple paragraph

Here is how you would make a simple paragraph

var myP = new sb.element({
	tag: 'p',
	innerHTML: 'here is some data'
});
myP.appendBefore('#myOtherElement');

Creating a an Image

Here is how you would make a simple image

var myImg = new sb.element({
	tag: 'img',
	src: 'http://surebert.com/media/images/banner.png'
});
myImg.appendBefore('#imgBox');

Creating an radio button

Here is how you would make a radio button with a label.

var myLabel = new sb.element({
	tag : 'label',
	innerHTML : 'here is the label',
	styles : {
		color :'red',
		fontSize:'12px'
	}
});

var myInput = new sb.element({
	tag: 'input',
	name : 'nameOfInput', //gets passsed to server side scripts
	type : 'checkbox',
	defaultChecked : true,
	value : 'myValue'
});

myInput.appendTo(myLabel);

myLabel.appendTo('body');

You could also wrap this in your own custom function if you were creating lots of radio buttons. Look in the source code to see how I did just that.

Other Tips

You really need to consult the surebert docs to find all the properties and methods of sb.elements. You will be please to find around 30 useful methods that make DOM manipulation a breeze. From checking for the presence of a className to adding and removing events. Check it out.

Just for fun

Creates a bunch of draggable/click deletable square and randomly puts them around the page.

for(var x=18;x>10;x--){
	var square = new sb.element({
		tag: 'div',
		className :'dragPaper',
		styles : {
			cursor : 'pointer',
			height : Math.pow(x,1.9)+'px',
			width : Math.pow(x,2.0)+'px',
			left : sb.math.rand(0,500)+'px',
			top : sb.math.rand(0,$('#info').offsetHeight-300)+'px'
		}
	});
	
	var bar = new sb.element({
		tag: 'div',
		className :'title dragHandle',
		innerHTML : 'drag handle'
	});
	
	var trashCan = new sb.element({
		tag :'img',
		src : 'http://www.estrip.org/elmwood/images/ico_trash.gif',
		title : "Click to run this elements parentNode's remove() method",
		styles : {
			margin:'15px'
		},
		events : {
			mousedown : function(){this.parentNode.remove();}
		}
	});
	
	bar.appendTo(square);
	trashCan.appendTo(square);
	square.appendTo('#papers');
	
	square.makeDraggable();

	square=trashCan=bar=null;
}