Reorder DOM Elements Without Removing and Replacing

I had an interesting problem recently that required I re-order some DOM elements without doing a remove and replace. The existing implementation had a bug involving some filtering based on html attributes and I wanted to avoid rewriting some legacy code. Typically you would do something like this:

The problem is you are replacing everything including any events you have binded to those elements. The solution comes courtesy of this blog post and utilizes the jQuery detach method. Per the jQuery manual:

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

Our initial example becomes this:

This handy solution easily replaces what you might be more familiar with.