= Element API

API created to simplify the creation and manipulation of HTML elements in Javascript.

== Setup:

To use the Element API you will need to include the following Javascript file in your header.

<script src="Element.js"></script>

== Example usages:

You can use the code below to create an HTML DIV element that contains the text "my div" and will append it to the element baz. The Element.new method returns an ElementWrapper. The parent attribute can be passed in as an element, a String, or an ElementWrapper. To set the value within an object some objects use the value attribute and some use the innerHTML attribute. Using the Element API you are able to use the value attribute even if the elements DOM specifically calls for innerHTML.

Element.new({type:'div', value:"my div", parent:baz})

or Element.new({type:'div', value:"my div 2", parent:'baz'}) or var bar = Element.new({type:'span', parent:baz}) Element.new({type:'div', value:"my div 3", parent:bar})

The following code will create an HTML button element and will insert it before the element baz. Notice that in example three there's a call to the Element.for method which returns an ElementWrapper for the given element.

Element.new({type:'button', value:"Will display before the baz element", before:baz})

or Element.new({type:'button', value:"Will display before the baz element (2)", before:'baz'}) or var bar = Element.for('baz') Element.new({type:'button', value:"Will display before the baz element (3)", before:bar})

The code below will create an HTML DIV element and will insert it after the baz element. You will also notice that the code makes use of the className attribute, we assign the elements class to size.

Element.new({type:'div', value:"Will display after the baz element", after:baz, className:"size"})

or
Element.new({type:'div', value:"Will display after the baz element", after:'baz', className:"size"}) or var bar = Element.for('baz') Element.new({type:'div', value:"Will display after the baz element", after:bar, className:"size"})

css

.size {
    font-size:250%;
}

The code below will create an HTML button with the value "click me", append itself to the element baz, and when the onclick event is fired an alert will be displayed with the text "clicked"

Element.new({type:'button', value:'click me', parent: baz, onclick: function() { alert('clicked'); } })         

Will add the class 'blue' to the element roo

Element.addClassName(roo, 'blue')   

or roo.addClassName('blue')

Will remove the class 'blue' from the element roo

Element.removeClassName(roo, 'blue')

or roo.removeClassName('blue')