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.