Create Function Library

Instantiating the library
Adding an element
Adding a radio/checkbox/select grouping
Adding multiple labeled elements
Adding attributes to an element on the page
A list of special attributes that can be added
Removing an element and its children
Showing and hiding an element by using a slide

Instantiate the library

<head>
....
	<script type="text/javascript" src="js/domManProto.js"></script>
....
	<script type="text/javascript">
		domManip = new domMan();
	</script>
....
</head>

Adding an element

<a onclick="domManip.addElement(elementType:String, parentId:String, elementId:String, attributes:Array)">Add element</a>

This method adds an HTML element of any type to the specificed parent. It assigns it an id attribute passed in by the elementId parameter. It can also assign several other optional attributes by passing a simple array of attributes in. Each entry must be formatted as 'attributeName:attributeValue'. 'addEl' may be used instead of 'addElement' for shorthand.

Adding an element example: img

<a onclick="domManip.addElement('img', 'testArea1', 'logoimage', ['fadeIn:8', 'src:logo.gif', 'class:imgBorder'])">Add img</a>

Try it: Add img

testArea1

Adding an element example: input -> text

<a onclick="domManip.addEl('input', 'testArea2', 'atextinput', ['type:text','size:50'] )">Add text input</a>

Try it: Add text input

testArea2

Adding an element example: input -> radio

<a onclick="domManip.addElement('input', 'testArea3', 'exampleRadio', ['type:radio','name:someRadios'])">Add radio one</a>
<a onclick="domManip.addElement('label', 'testArea3', 'exampleLabel', ['name:exampleLabel','text:Radio Two', 'for:exampleRadio'])">Add label to radio</a>

Try it: Add radio
Add label to radio

testArea3

Note: When adding an element that requires the display text to be put inbetween tags such as a <p>, <h2>, <span>, <div>, <a>, <label>, etc.. pass the attribute 'text:some display text' to set the text inbetween the tags.

Adding a radio/checkbox/select grouping

<a onclick="domManip.addXXXXXGroup('parentId:String', 'elementId:String', values:Array, labels:Array, attributes:Array)">Add Grouping</a>

These methods add a group of either radios, checkboxes, or select options. It adds each with its accompanying label. The parentId parameter is where the element will be placed in to. The elementId parameter is the base id for each element of the grouping. Each element's id will have an index attached to it starting at 1 and adding upwards. The values parameter accepts a simple array with values for each element(the number of elements is based off the size of this array). The label parameter also accepts a simple array containing the label of each element. The last parameter, an attributes array, can be used to add optional attributes to every element being added. Each entry must be formatted as 'attributeName:attributeValue'.

Adding a radio grouping example

<a onclick="domManip.addRadioGroup( 'testArea4', 'deli', ['ham', 'salami', 'cheese'], ['Ham', 'Salami', 'Cheddar'], ['name:deliGrouping'] )">Add Radio Group</a>

Try it: Add Radio Grouping

testArea4

Adding a checkbox grouping example

<a onclick="domManip.addCheckboxGroup('testArea5', 'sunglass', ['$190', '$100', '$250'], ['Oakleys', 'Rayban', 'Maui Jim'], ['name:sunglasses'])">Add Checkbox Group</a>

Try it: Add Checkbox Grouping

testArea5

Adding a select options grouping example

<a onclick="domManip.addEl('select', 'testArea6', 'testSelect')">Add Select Box</a>

<a onclick="domManip.addOptionGroup('testSelect', 'state', ['northwest', 'west coast', 'southern'], ['Michigan', 'California', 'Alabama'], ['class:selectOption'])">Add a Select Grouping</a>

Try it: Add Select Box
then Add an Options Grouping

testArea6

Note: The addOptionGroup needs a select container to add to. It does not create one itself. Add one using addElement beforehand.

Adding multiple labeled elements

<a onclick="domManip.addTagGroup(elementType:String, parentId:String, elementId:String, labels:Array, attributes:Array)">Add Li Grouping</a>

This method can add a group of commonly used elements with unique text for each. If an html tag has a closing tag then this function can be used to create several at a time. The parentId parameter is where the element will be placed in to. The elementId parameter is the base id for each element of the grouping. Each element's id will have an index attached to it starting at 1 and adding upwards. The labels parameter accepts a simple array with text labels for each element(the number of elements is based off the size of this array). The last parameter, an attributes array, can be used to add optional attributes to every element being added. Each entry must be formatted as 'attributeName:attributeValue'.

Adding several list elements to an ordered list example

<a onclick="domManip.addElement('ol', 'testArea8', 'petList', [])">Add ol</a>

<a onclick="domManip.addTagGroup('li', 'petList', 'pet', ['dog', 'cat', 'bird', 'hamster', 'fish', 'snail'], ['class:petLis'])">Add Li Grouping</a>

Try it: Add ol
then Add List Grouping

testArea8

Adding several paragraphs example

<a onclick="domManip.addTagGroup('p', 'testArea9', 'ipsumP', 
['Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras nisl.', 
'Pellentesque interdum, elit sed venenatis laoreet, magna ligula lacinia ante, vitae dignissim mi magna fringilla lectus. Quisque porta, augue sed luctus pretium, arcu nisl imperdiet pede, vel mattis risus ante tempus ante.', 
'Aenean consectetuer mi sit amet sem. Aenean nulla sem, sagittis ac, pretium vel, placerat et, mauris.'], ['fadeIn: 5'])">Add Paragraph Grouping</a>

Try it: Add Paragraph Grouping

testArea9

Adding and changing attributes example

<a onclick="domManip.addAttributes(elementId:String, attributes:Array)">Add/Change Attributes</a>

This method allows the attributes of an element to be created or changed. The second parameter, attributes, is a simple array that accepts one or more attributes. Each entry must be formatted as 'attributeName:attributeValue'.

Adding attributes example

<a onclick="domManip.addAttributes('testInput',['fadeIn:30', 'size:50', 'class:fieldBorder', 'onblur:alert(\'hey\')'])">Manipulate attributes</a>

Try it: Manipulate Attributes

testArea7

Special Attributes

fadeIn:interger - specifies how fast an element should fade in if it all. The higher the number the longer it takes.
text:string - inserts a string of text between an elements tags if the element has that ability
forgot something that i wanted to add here

Removing an Element

<a onclick="domManip.removeElementById(elementId:String)">Remove element</a>

This method finds an element just like getElementById and then removes itself and all of its children. 'domManip.remElById(elementId) can also be used. The Method 'removeInsidesById can be used in the same way but will not remove the elementId itself, just its contents.

Removing an Element Example

<a onclick="domManip.removeElementById('removeMePlease')">Remove the Button</a>

Try it: Remove the Button

testArea10

Dom's DOM Manipulator