Setting element content
1. Replacing HTML or text content
Command syntax:html()
Obtains the HTML content of the first element in the matched set.
Parameters
none
Returns
The HTML content of the first matched element. The returned value is identical to accessing the innerHTML property of that element.
Command syntax:html(text)
Sets the passed HTML fragment as the content of all matched elements
Parameters
text (String) The HTML fragment to be set as the element content
Returns
The wrapped set
Command syntax:text()
Concatenates all text content of the wrapped elements and returns it as the result of the command
Parameters
none
Returns
The concatenated string
eg: <ul id="theList">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
// $('#theList').text();//results in variable text being set to OneTwoThreeFour.
Command syntax:text(content)
Sets the text content of all wrapped elements to the passed value. If the passed text contains angle brackets (< and >),
these characters are replaced with their equivalent HTML entities.
Parameters
content (String) The text content to be set into the wrapped elements. Any angle bracket characters are escaped as HTML entities.
Returns
The wrapped set.
Note that setting the inner HTML or text of elements using these commands will replace contents that were previously in the elements.
2.Moving and copying elements
Command syntax:append(content)
Appends the passed HTML fragment or elements to the content in all matched elements.
Parameters
content (String|Element|Object) A string, element, or wrapped set to append to the elements of the wrapped set.
Returns
The wrapped set.
Command syntax:appendTo(target)
Moves all elements in the wrapped set to the end of the content of the specified target(s).
Parameters
target (String|Element) A string containing a jQuery selector or a DOM element. Each element of the wrapped set will be appended to that location.
If more than one element matches a string selector, the element will be copied and appended to each element matching the selector.
Returns
The wrapped set.
A number of related commands work in a fashion similar to append() and appendTo():
■ prepend() and prependTo()—Work like append() and appendTo(), but insert the source element before the destination target’s contents instead of after.
These commands can also be demonstrated in the Move and Copy Laboratory by clicking the PrependTo radio button before clicking Execute.
■ before() and insertBefore()—Insert the element before the destination elements instead of before the destination’s first child.
■ after() and insertAfter()—Insert the element after the destination elements instead of after the destination’s last child.
eg: $('<p>Hi there!</p>').insertAfter('p img');//This statement creates a friendly paragraph and inserts a copy of it after every image element within a paragraph element.
3. Wrapping elements
Command syntax:wrap(wrapper)
Wraps the elements of the matched set with the passed HTML tags or a clone of the passed element.
Parameters
wrapper (String|Element) The opening and closing tags of the element with which to wrap each element of the matched set, or an element to be cloned and server
as the wrapper.
Returns
The wrapped set.
eg: $("a.surprise").wrap("<div class='hello'></div>") //Wrap each link with the class surprise in a <div> with the class hello
Command syntax:wrapAll(wrapper)
Wraps the elements of the matched set, as a unit, with the passed HTML tags or a clone of the passed element.
Parameters
wrapper (String|Element) The opening and closing tags of the element with which to wrap each element of the matched set, or an element to be cloned and server as the wrapper.
Returns
The wrapped set
Command syntax:wrapInner(wrapper)
Wraps the contents, to include text nodes , elements of the matched set with the passed HTML tags or a clone of the passed element.
Parameters
wrapper (String|Element) The opening and closing tags of the element with which to wrap each element of the matched set, or an element to be cloned and server as the wrapper.
Returns
The wrapped set
4.Removing elements
Command syntax:remove()
Removes all elements in the wrapped set from the page DOM
Parameters
none
Returns
The wrapped set
Command syntax:empty()
Removes the content of all DOM elements in the matched set
Parameters
none
Returns
The wrapped set
5. Cloning elements
Command syntax:clone(copyHandlers)
Creates copies of the elements in the wrapped set and returns a new wrapped set that contains them. The elements and any children are copied.
Event handlers are optionally copied depending upon the setting of the copyHandlers parameter.
Parameters
copyHandlers (Boolean) If true, event handlers are copied. If false, or omitted, handlers are not copied.
Returns
The newly created wrapped set.
6. Dealing with form element values
Command syntax:val()
Returns the value property of the first element in the matched set. When the element is a multi-select element, the returned value is an array of all selections.
Parameters
none
Returns
The fetched value or values.
eg: $('[name=radioGroup]:checked').val()//returns the value of the single checked radio button (or undefined if none is checked).
Command syntax:val(value)
Sets the passed value as the value of all matched form elements
Parameters
value (String) A string that’s set as the value property of each form element in the wrapped set
Returns
The wrapped set
Command syntax:val(values)
Causes any check boxes, radio buttons, or options of <select> elements in the wrapped set to become checked
or selected if their values match any of the values passed in the values array.
Parameters
values (Array) An array of values that will be used to determine which elements are to be checked or selected.
Returns
The wrapped set.
eg: $('input,select').val(['one','two','three']);//This statement will search all the <input> and <select> elements on the page for
values that match any of the input strings: one, two or three. Any check boxes or
radio buttons that are found to match will become checked, and any options that
match will become selected.