removeNode and appendNode Functions

First, for everyone following the JavaScript Game Engine project, I am putting it on hold for now. Building an engine to support dynamic games requires a lot of work… a lot more more time than I currently have to devote to the project, and I do not want to release code of questionable quality. I will, however, revisit it from time to time and complete the article series as I am able.

For todays article, I would like to introduce two of my favorite DOM extension methods, "removeNode" and "appendNode". They are basically, simple wrappers for "removeChild" and "appendChilde" with the added functionality to animate the addition/removal of a DOM nodes. I find these methods to be very useful in providing feedback to a user when they are taking an action that modifies the DOM. Most of the time (and the default animation of this method) an opacity fade does the trick, making the addition/removal of a DOM node tangible to the user, but sometimes you need a different animation, so the methods accept animation arguments as optional parameters. I build these methods on top of YUI animator and either add them to the "YAHOO.util.DOM" or Document Object.

Example 1: AppendNode

Document.appendNode = function(root, elem, ap, fn) {
    var node = $(elem),
        parent = $(root);

    if (parent && node) {
        parent.appendChild(node);

        var animParams = (isType(ap, object)) ? ap : {opacity: {from: 0.25, to: 1}},
            anim = new YAHOO.util.Anim(node, animParams, 0.5, YAHOO.util.Easing.easeIn);

        anim.onComplete.subscribe(function() {
            if (fn && isType(fn, function)) {fn(node);}
        });
        anim.animate();
    }

    return node;
};

The "appendNode" method has two required parameters: the root element to append to, and the node to append with. As usual, I have written the "YAHOO.util.Dom.get" method as the $ shortcut method. By default the method will animate with a fade in from 0.25 opacity to 1 opacity, but you can override it by passing in your own arguments for YUI animation. If you want an event to occur after the animation, then provide a Function as the last argument, however it is also not required; this Function will be passed the newly appended node as its only parameter.

Example 2: RemoveNode

Document.removeNode = function(elem, ap, fn, isRemoveListeners) {
    var node = $(elem),
        parent = node.parentNode;

    if (parent) {
        var animParams = (isType(ap, object)) ? ap : {opacity: {from: 1, to: 0.25}},
            anim = new YAHOO.util.Anim(node, animParams, 0.5, YAHOO.util.Easing.easeOut);

        if (isRemoveListeners) {Event.purgeElement(node, true);}

        anim.onComplete.subscribe(function() {
            parent.removeChild(node);
            if (fn && isType(fn, function)) {fn();}
        });

        anim.animate();
    }
};

The "removeNode" method is very similar to the "appendNode" method, with the noted exception that the animation must occur before the actual removal of the child-node. You do not need to pass in the root Element as we can extract that directly from the provided node. Lastly, if you have attached any listeners to the node or its children, you should probably remove them. I leveraged YUIs "YAHOO.util.Event.purgeElement" (shortcut name of "Event.purgeElement") method for this, which will recursively remove the events attached to your node and its children, when you pass true as the last parameters (isRemoveListeners), otherwise no events will be removed.

Again, these methods are simple, but very handy. I have found it is almost always useful to provide feedback to users when they are adding/removing DOM nodes, and these methods abstract the logic away, so that I can do just about anything I need. If you&rsquot;d like to give them a try, I have provided a test page.