• Choose a category
• All
• Classic-Fiction

By Root 5533 0

are before, prepend, and append. The function prepend puts the DOM before the inner text of matching elements, whereas the function append puts the DOM right after the inner text of matching elements.

You can also add elements to an existing DOM the other way around—that is, by first creating the new DOM and then inserting it in some way around elements in a wrapped set. You use insertAfter and insertBefore to insert a DOM after or before an existing element:

$(html).insertAfter(selector);

$(html).insertBefore(selector);

You use the prependTo and appendTo functions to insert something before and after, respectively, the inner text of a matching element:

$(html).prependTo(selector);

$(html).appendTo(selector);

To detach an existing DOM subtree, you use the method detach. A detached DOM tree is treated like a dynamically created DOM tree and can be moved around the DOM. Imagine the following page content:

Consider now the following script code:

The swapText function is defined as the click handler of a button in the page. When clicked, it first grabs a reference to the DOM subtrees for the title and content. Note that the #section parameter identifies the context for the selector—it gets all h1 elements within the specified section of the page. Next, the position of the title and content is toggled around the hr as you click the button. (See Figure 21-3.)

Figure 21-3. Toggling DOM subtrees in a page.

Important

In general, it is preferable to create a DOM tree using plain HTML when the HTML block you need is fairly complex. You might want to use insertion methods only for single elements (including an entire DOM subtree), In other words, it is not recommended that, say, to create a UL list you place multiple calls to insert the UL tag and then each of the required LI tags. You compose the HTML string and get it as a DOM in a single step.

Removing DOM Elements

To remove elements from the DOM, you have various options. You can remove all elements that match a given selector using the following code:

$(selector).remove();

The empty function, on the other hand, just empties the body of each element that is selected through the query expression:

$(selector).empty();

Finally, the aforementioned detach function detaches a DOM subtree from the main DOM but keeps it referenced in memory so that you can re-add it everywhere at any time:

$(selector).detach();

Modifying DOM Elements

HTML DOM elements are characterized by attributes, inner text, and HTML. For each of these, you have ad hoc functions. For example, you use the attr function to read and write the content of a given attribute. The following code reads the value of the maxlength attribute of a given text box:

var maxLength = $("#TextBox1").attr("maxlength");

To set it, instead, you just add a second parameter to attr, as shown here:

$("#TextBox1").attr("maxlength", 10);

You can use the function attr to read and write any attributes. For the value attribute, however, you can resort to the more specific val function. The val function has the same usage as the attr function.

To get and set the inner text of an element, you use the text function. The html function is used to get and set the inner HTML of an element.

Sometimes you just want to make a copy of an element DOM element or subtree and duplicate it in various places around the page. The jQuery library offers the clone function:

$(selector).clone();

Used in this way, the function performs a deep copy of matching elements, including attributes and descendants. The function, however, also supports