JQuery – interacting with the wrapped set – part IX

Even though we’ve looked at several interesting JQuery methods for interacting with the DOM, we’re still missing some interesting methods which we’ll try to cover in this post. We’ll start by looking at the wrap methods. These methods allow us to wrap one or more elements with other element(s). For instance, take a look at the following HTML snippet:

<span>hi</span>
<span>hi</span>
<span>hi</span>
<input type="button" value="wrap items" />

Lets assume that we want to wrap all span elements with divs. Here’s how we can do that with a simple line of JQuery code:

$("span").wrap("<div>");

Instead of passing a string, we can also pass a reference to an existing HTML element. For instance, we can create a new element on the fly and pass it to the method, as you can see in the next snippet:

$("span").wrap(document.createElement("div"));

If you apply a style to the divs, then you’ll see that the previous example will wrap each span in a div. There might be some cases where you’re interested in wrapping all elements inside a single element. In those cases, you should use the wrapAll method:

$("span").wrapAll(document.createElement("div"));

The final result is that all span elements will end up being wrapped in a single div. btw, the wrap method implementation relies in wrapAll for producing the correct result. There’s also a variation of this method which relies on wrapping the contents of the wrapped set elements. The wrapInner method is what you want if you need to do that:

$("span").wrapInner("<i></i>");

The previous snippet wraps the contents of the span elements in a i element.

Replacing elements with others is also a common operation. And that’s why JQuery offers you two methods for doing that: you’ve got the replaceWith and a replaceAll methods. The replaceWith method expects a string or a reference to an HTML element and ends up replacing the elements of the wrapped set with the new content. Here’s an example based on the previous snippet:

$("span").replaceWith("<div>replaced span</span>");

The previous snippet is probably useless…In that kind of scenario, you’d probably want to replace the span with a div but you’d probably like to keep the original span’s content. That can also be easily achieved with JQuery with code similar to this:

$("span").each(function(pos) {
       $(this).replaceWith("<div>" + $(this).text() + "</div>");
     })

This couldn’t be easy, right? The replaceAll method expects a selector and replaces all matched elements with the JQuery’s wrapped set element. For instance, the next snippet replaces all span elements with input elements (notice that in this case, the “order of replacement” is inverted):

$("input").replaceAll("span");

I’d say that this post wouldn’t be completed without mentioning the clone method. You’ll use this method for cloning an existing wrapped set. Take a look at the following snippet:

$("span").clone().each(function(pos) {
                          $(this).text($(this).text() + " cloned");
                        }).insertAfter("input");

The previous snippet clones all span elements, changes each of its text and then inserts them after the only input element we’ve got in our page. There’s also an “overload” of this method which receives a boolean: passing true means that the event handlers of the original elements will also be cloned. And that’s it for today. Keep tuned for more on JQuery.