Framework PoC

Lol, frameworks. Just a little testy fiddling for a basic custom framework that supports cascading functions. Elements can be selected by passing a DOMelement object or an ID string to FW.

by mich

HTML

<div id="container_one">
    <div id="div_one">This is the first div</div>
    <div id="div_two">this is the second.</div>
</div>
<div id="container_two">
</div>
<button onclick="moveTheElement()">Move</button>

CSS

body {
    font-family: Arial;
}
#container_one, #container_two {
    margin: 5px;
    border: solid 1px #555;
    padding: 3px;
    color: #00F;
}
#container_two {
    color: #F00;
}

JavaScript

var FW = function(elemID) {
    var elem = (typeof elemID === 'string') ? document.getElementById(elemID) : elemID;
    return {
        'getElement': function() { //returns DOM element, no cascading
            return elem;
        },
        'html': function() {
            if (arguments.length === 0) { //returns string, no cascading
                return elem.innerHTML;
            }
            else if (arguments.length === 1) { //returns FW object
                elem.innerHTML = arguments[0];
                return this;
            }
        },
        'remove': function() { //returns FW object
            elem.parentNode.removeChild(elem);
            return this;
        },
        'appendTo': function(destination) { //returns FW object
            destination.getElement().appendChild(elem);
            return this;
        },
    }
};
var moveTheElement = function() {
    FW('div_two').appendTo(FW('container_two')).html('I have been moved!');
}