Clone, Wrap and Unwrap

The following links will add divs with the following class to the box below:

.wrapper1 { border: solid 2px red; padding: 4px; }
.wrapper2 { border: double 6px green; padding: 6px; }
.wrapper3 { border: solid 4px blue; padding: 8px; }

Wrap up the Box Below

You may notice that the wrapper added is always the innermost of possible concentric wrappers. This is the opposite of how a tree adds rings. This is because the wrap method is targeting the box and wrapping it, not the collection of wrappers. Similarly, the unwrap method starts with the wrap that is immediate to the box and works its way out. Normally, the unwrap function will work its way up the DOM, removing any outer nodes, until it reaches the body tag. Unwrap could as well remove that tag, leaving the target node as the next sibling of the head tag, but I doubt anyone would want that. Therefore unwrap will never remove the body tag, even when that is the parent tag of the target element.

Wrap Me