Wrapping Paper

I love really intricate graphical treatments around page elements, I also really hate putting extra code fluff into pages. The way I see it, if a chunk of markup is only there strictly for aesthetic purposes, it’s on the chopping block. The more garbage code you have in your document, the tougher it is for search engine spiders and screen readers to walk through your pages.

The DOM however is fair game. Anything you want to screw with on the clientside (so long as it’s crossbrowser compatible) is A-Ok in my book, once a document is in-browser gets pulled apart any way.

To that end, I wrote this (which uses a very basic set of MooTools methods):

function wrapper(selector) {
    $$(selector).each(
        function(element) {
            var wrapper = new Element('div').setProperty('class','outer').injectBefore(el);
            element.injectInside(wrapper);

            var before = new Element('div').setProperty('class','before').injectBefore(element);
            var after = new Element('div').setProperty('class','after').injectAfter(element);
        }
    )
}

which takes all elements on the page with a given selector and wraps them in DIVs for styling.

Before:

<img src='foo.jpg' alt='Some image' class='to-be-wrapped' />

After:

<div class='outer'>
    <div class='before'></div>
    <img src='foo.jpg' alt='Some image' class='to-be-wrapped' />
    <div class='after'></div>
</div>

or

You could just as easily use this same method to throw rounded corners around blocks of text or create some really nice pull quotes.

This approach is pretty similar to the CSS before and after pseudo classes, but is properly supported across A-Grade browsers. Also, I think this gives you a little more flexibility, as you can could embed checks on the content you are about to wrap and make slight tweaks. For example, if you were wrapping blog comments, you might want to call out the post author’s comments in a slightly different way.