Overview of jQuery - HTML5 Programming for ASP.NET Developers - page 55

removeAttr() Removes an attribute from an element

replaceWith() Replaces target element with specific content

text() Returns the text content of an element including all child elements

val() Returns the value from a form element

wrap()

Wraps every element of a matched set in a given element

You're already familiar with some of these methods, such as val() , attr() , removeAttr() , text() , and
html() . Listing 2-14 shows the use of other methods from Table 2-6.

Listing 2-14. Using DOM-Manipulation Methods
$("#container").append("<div>Hello</div>");
$("<div>Hello</div>").appendTo("#container");
$("span").replaceWith("<div class='class1'>Hello Universe!</div>");
$("<div class='class2'>Hello World!</div>").replaceAll("div.class1");
The first line of code from Listing 2-14 adds <div>Hello</div> at the end of the container element. So,
if the container is a <span> element, then after calling the append() method, the effective markup is
<span id='container'><div>Hello</div></span>

n Note Most browsers let you view the HTML source of the web page being displayed. However, this HTML source
doesn't include any HTML markup dynamically added at runtime using the jQuery methods listed in Table 2-6.

The second line of code uses the appendTo() method. This method is similar to the append() method
with one difference: append() is invoked on the target element and accepts markup to be appended. The
appendTo() method accepts a target element as a parameter and appends the specified markup at the end
of the target.
The example of the replaceWith() method replaces all the <span> elements with <div
class='class1'> elements. For example, if the original markup is <span>Hello World!</span> , then after
calling the replaceWith() method, the new markup is <div class='class1'>Hello Universe!</div> .
Finally, the replaceAll() method replaces all the <div> elements with the CSS class class1 with
<div>Hello World!</div> .

jQuery Ajax Techniques
Many of the HTML5 features discussed in later chapters require you to pass data between the client
browser and the server. Such a data transfer can be accomplished in two ways:

• Submitting an entire form to the server

• Making an Ajax request to the server
The first technique involves submitting the entire form to the server using GET or POST requests.
Although this is a classic technique and easy to implement (using a Submit button or the submit()
JavaScript method), it suffers from a drawback: the entire page needs to be refreshed, which affects the
responsiveness and overall performance of the web application. No wonder many modern web
applications tend to use the second way of sending data to the server.