JQuery: interacting with the wrapped set – part VII

Now that we now how to create new HTML elements, it’s time to go on and see how we can interact with the page’s DOM. We’ll start with something basic: adding new elements to an existing element. Suppose we’ve got the following HTML:

<div id="body">
    <p>Today is a beautiful day for more JQuery learning.</p>
    <p>I'd say that it's also a good day to hit the beach.</p>
</div>

And now, let’s also assume that we want to add another paragraph to our top DIV element with the text hello. Here’s one way to do it with JQuery:

$("div").append("<p>Hello</p>");

The append method adds the “inferred” reference to the children collection of each element of the wrapped set. In the previous example, we’re passing a string with an HTML snippet. We could also pass a JQuery object. Consider the next snippet:

$("div").append($("<p>Hello</p>"));

It produces exactly the same result as the first example we saw: it creates a new paragraph, wraps it in a JQuery object and adds it to each of the wrapped set elements’ children collection. Notice that in the previous examples append really means “adding” something to the children collection of an existing HTML element (or elements). If the JQuery object we’ve passed wrapped elements that belong to the current page’s DOM, then the results would be different: we’d be moving instead of copying. Look at the following snippet:

$("div").append($("select"));

In this case, we’d be moving all the select elements of the current page from their predefined position and we’d be copying them into all the divs that exist in the page. This is a good way of moving elements from one container to another. There’s still one more way to use the append method: you can pass it a reference to a DOM node. Here’s an example that shows how to copy the 1st select into all div elements:

var firstSelect = $("select")[0];
$("div").append(firstSelect);

Instead of appending to the children collection of all the elements in the wrapped set, we can also do the opposite, ie, append all the elements of the current wrapped set to another element(s). To do that, we need to use the appendTo method. Here’s an example:

$("select").appendTo("div:first");

The previous example moves all selects into the first div of the page. append and appendTo aren’t the only available methods for changing the current DOM. For instance, if you need to add the items at the beginning of the children collection, then you should use the prepend or prependTo methods (they’re similar to the append and appendTo methods). here’s how you can move the existing select items to the beginning of the first div’s children collection:

$("div:first").prepend($("select") );

There will also be times when you need to add one or more elements before an existing item (and not in that item’s children collection). That kind of operation is supported by the before, insertBefore, after and insertAfter methods. These methods work  in a similar fashion to the append and appendTo methods (in the sense that they “invert” the arguments"). For instance, both these instructions move the selects of the current page and positions them before the first div:

$("div:first").before($("select") );
$("select").insertBefore($("div:first") );

The after and insertAfter methods are similar, but end up putting the items after  (instead of before!) the indicated target. Adding/moving elements of the DOM is a necessary and recurrent operation. Removing is also something which we need to do often. That’s why JQuery offers a remove method. Calling remove over a JQuery object ends up removing all the elements of the wrapped set from their current position in the DOM. Notice that these “removed” elements are still wrapped on the JQuery objecty that is returned from the method. This means that you can use chaining to perform other interesting operations on that set of elements (for instance, you can remove several items from one place and put then on another).

Notice that you can also “clean” the children nodes of all the elements of the wrapped set by using the empty method. For instance, let’s assume that we want to clear the contents of the first div. here’s how you’d do that:

$("div:first").empty();