@@ -2,7 +2,7 @@ h1. DOMBuilder * (c) Ryan Parman - "http://ryanparman.com/labs/":http://ryanparman.com/labs/ * BSD Licensed - "http://creativecommons.org/licenses/BSD/":http://creativecommons.org/licenses/BSD/ -* Tested in Firefox 3, Safari 3/4, IE 6/7/8 +* Tested in Firefox 3/3.5, Safari 3/4, IE 6/7/8 h1. Usage @@ -38,11 +38,14 @@ document.body.appendChild(control_div);</pre> h3. Lastly, here's how we'd do it with DOMBuilder: -<pre>document.body.appendChild( - new DOMBuilder('div', { 'class':'location_select_control' }).child( - new DOMBuilder('a', { 'href':'', 'class':'location_select_label' }).child([ - new DOMBuilder('label').innerHTML('This is my label'), - new DOMBuilder('label').innerHTML('This is another label') +<pre>// Create a shortcut +var $dom = function(elem, attr) { return new DOMBuilder(elem, attr); }; + +document.body.appendChild( + $dom('div', { 'class':'location_select_control' }).child( + $dom('a', { 'href':'', 'class':'location_select_label' }).child([ + $dom('label').innerHTML('This is my label'), + $dom('label').innerHTML('This is another label') ]) ).asDOM() );</pre> @@ -92,6 +95,18 @@ h3. Returns * <code>DOMBuilder</code> - The original DOMBuilder object. +h2. appendHTML(text) - _Method_ + +Append to a value via innerHTML. + +h3. Parameters + +* <code>str</code> - {String} (Required) The string to append via innerHTML. + +h3. Returns + +* <code>DOMBuilder</code> - The original DOMBuilder object. + h2. asDOM() - _Method_ Return the DOM element for DOMBuilder that can be used with standard DOM methods. This is optional when passed into a DOMBuilder.child() method. This is required as the last method in the chain when passing to a native DOM method. README.textile @@ -2,13 +2,13 @@ * DOM BUILDER * http://github.com/skyzyx/dombuilder/ * BSD Licensed - http://creativecommons.org/licenses/BSD/ - * + * * Usage documentation available at the project site. */ /** * DOMBuilder generates DOM nodes with an object-oriented syntax. - * + * * @param elem - <String> (Required) The name of the element to generate. * @param attr - <Hash> (Optional) A JSON Hash of the attributes to apply to the element. * @returns <DOMBuilder> - A DOMBuilder object. @@ -40,7 +40,7 @@ function DOMBuilder(elem, attr) { /** * Append one or more child nodes. - * + * * @param obj - <HTMLElement|DOMBuilder|Array> (Required) A DOM element, a DOMBuilder object, or an array of these for multiple children. * @returns <DOMBuilder> - The original DOMBuilder object. */ @@ -75,13 +75,28 @@ function DOMBuilder(elem, attr) { /** * Set a value via innerHTML. - * + * * @param str - <String> (Required) The string to assign via innerHTML. * @returns <DOMBuilder> - The original DOMBuilder object. */ this.innerHTML = function(str) { // Set the value with innerHTML + this.element.innerHTML = str; + + // Return the DOMBuilder object so we can chain it + return this; + }; + + /** + * Append to a value via innerHTML. + * + * @param str - <String> (Required) The string to append via innerHTML. + * @returns <DOMBuilder> - The original DOMBuilder object. + */ + this.appendHTML = function(str) { + + // Append the value with innerHTML this.element.innerHTML += str; // Return the DOMBuilder object so we can chain it @@ -90,9 +105,9 @@ function DOMBuilder(elem, attr) { /** * Return the DOM element for DOMBuilder that can be used with standard DOM methods. - * This is optional when passed into a DOMBuilder.child() method. This is required + * This is optional when passed into a DOMBuilder.child() method. This is required * as the last method in the chain when passing to a native DOM method. - * + * * @returns <HTMLElement> - The entire DOMBuilder object as a DOM node. */ this.asDOM = function() { @@ -103,7 +118,7 @@ function DOMBuilder(elem, attr) { /** * Return the DOMBuilder object as an HTML string. - * + * * @returns <String> - The entire DOMBuilder object as a string of HTML. */ this.asHTML = function() { @@ -124,7 +139,7 @@ function DOMBuilder(elem, attr) { /** * Determine the typeOf value of an object. Works better than JavaScript's built-in typeof operator. - * + * * @param obj - <Object> (Required) The object to check the type of. Null will return null, Array will return array. * @returns <String> - The type of the object. */ @@ -159,7 +174,7 @@ function DOMBuilder(elem, attr) { /** * Determine whether an object is a DOMBuilder object. - * + * * @param obj - <Object> (Required) The object to check. * @returns <Boolean> - Whether the object is a DOMBuilder object. */ dombuilder.js 6da4df8be19d61236f19643b9c24e7a712102ed9 Ryan Parman ryan@ryanparman.com http://github.com/skyzyx/dombuilder/commit/bfcd874d454bfff79daa8243a0b87558b0942eae bfcd874d454bfff79daa8243a0b87558b0942eae 2009-11-04T22:45:39-08:00 2009-11-04T22:45:39-08:00 Made innerHTML() work just like innerHTML, and added apendHTML() which appends via innerHTML. 4d4e49147c16989b60a983f5bfa7a2321aa299c6 Ryan Parman ryan@ryanparman.com