Manipulating the DOM Document with jQuery

Last updated 13 January 2016.

Previous chapter

First chapter

Setting and getting attributes with the attr function

To set or get attributes on a DOM element, you use one and the same function, called attr. When setting an attribute value this way, it will usually cause an immediate update to the same property and thus also an immediate visual update, if the value has anything to do with what the page displays. The function can be used in three different ways:

• value = attr(name). This is used to get an attribute value. The function returns a string.
• attr(name, value). This is used to set a single attribute value.
• attr(object). This is used to set multiple attribute values in one go. The attribute values are taken from the named properties of the object that is passed in.

An example of retrieving an attribute value:

An example of setting attribute values on two elements:

Removing attributes with the removeAttr function

The removeAttr function is used to remove one or more attributes: removeAttr(names), where the single argument is a string containing a space-delimited list of attribute names. An example:

Of course, in the above example, the lang and title attributes are not really removed, only their values are cleared to their default. Only if you remove a homegrown attribute, which is not part of the HTML specification, is it removed for real.

Setting and getting properties with the prop function

To set or get properties on a DOM element, you use one and the same function, called prop. When setting a property value this way, it will usually cause an immediate update to the same attribute and also an immediate visual update, if the value has anything to do with what the page displays. The function can be used in three different ways:

• value = prop(name). This is used to get a property value. Oddly, the name parameter is case-sensitive, unlike with the attr method. Of course, this method may be called on a jQuery set containing any number of elements. The method simply returns the property value of the first element.
• prop(name, value). This is used to set a single property. The second parameter can be of any type, including a function (see example below) returning a new property value.
• prop(object). This is used to set multiple properties in one go. The property values are taken from the named properties of the object that is passed in.

An example of setting and then retrieving a property value:

The below snippet is an example of setting a property using a custom function. The function takes the index of the element in the jQuery set as its first argument, and the current property value as its second argument. In addition, the this variable is set to reference the element in question. The function must return the new property value.

Removing properties with the removeProp function

The removeProp function is used to remove a single property: removeProp(name), where the single argument is a string containing a property name. An example:

As the above example shows, the title property isn't removed at all! This must be because the browser does not allow it. On the other hand, removing a custom property succeeds.

Doing custom properties with the data function

According to the HTML5 specification, it is possible to adorn an element with custom data in attributes. This feature often comes in handy in various scripting scenarios. The name of such an attribute must start with the letters "data-", e.g. "data-custom". jQuery reads these attributes and allows you to read and manipulate these data using the data method. jQuery is clever enough to guess the type of the data.

• value = data(name). This is used to get a property value that may or may not originate from a data-x attribute.
• data(name, value). This is used to set a single property value.
• data(object). This is used to set multiple properties in one go. The property names and values are taken from the named properties of the object that is passed in.

In dealing with these properties, jQuery strips the "data-" part from property names. Also, the property name will be camelCased, for example a "data-build-number" attribute will result in a "buildNumber" property. An example:

The above example demonstrates how jQuery transform "data-x" attribute names into property names and also that the value is correctly interpreted to be a number.

Note that, once values have been read from the attributes, there is no longer any link between attributes and properties read with the data function, as this example shows:

Removing properties with the removeData function

The removeData function is used to remove a single property or all properties: removeData([name]), where the single argument is a string containing one or more property names (separated with the space character) or an array of property names. If the argument is omitted, all the data properties are removed. An example:

As the example shows, a data property which is backed by an attribute is not really removed - instead it reverts back to the attribute value.

Changing style with the addClass method

The addClass method can be used to add one or more class names to the class property of an element. The syntax is addClass(names), where the single argument is a string containing one or more class names (separated with the space character). Or, one can pass a function for that single argument. The function must return a string of class names, and takes the element index and the element itself as arguments. An example:

Changing style with the removeClass method

With the ability to add classes dynamically, it is natural that you can remove the same classes with the removeClass method. The syntax is removeClass(names), where the single argument is a string containing one or more class names (separated with the space character) or a function (see the addClass method for details). An example:

Changing style with the toggleClass method

A common pattern is the toggling of class between two class names. The toggleClass method exists for that very purpose and has this signature: toggleClass([names] [,bSwitch]). The first, optional parameter specifies one or more class names; if the element in question does not have the class, it is added to the class property, otherwise it is removed from the class property. The first parameter has these variations:

• A string containing class names, separated by the space character.
• A function that returns a string of class names, with the signature function(/*integer*/index, /*string*/classNames, /*boolean*/bSwitch) : string. Index is the index of the element in the jQuery set, classNames contains the current class names, and bSwitch is the value of the parameter of the same name in the call of toggleClass. In addition, the this variable will be set to reference the DOM element.
• Omitted. If nothing is specified for this parameter, the class property of elements will be cleared, and then restored on the next call of toggleClass.

The bSwitch parameter is also optional and you can pass three different values:

• Omitted. If this parameter isn't used, the toggleClass method works as described above; it toggles the class names.
• If true is passed, the specified class names are added to the class property; in other words as using the addClass method.
• If false is passed, the specified class names are removed from the class property; in other words as using the removeClass method.

The next example shows a simple example of toggling two classes:

The following snippet exemplifies using the bSwitch parameter to add class names:

Setting and getting style with the css method

To set or get styles on a DOM element, you use one and the same function, called css. To get style values: var style = jQuerySet.css(names). To set values use: jQuerySet.css(name, value) or jQuerySet.css(values). The function can be used in three different ways:

• value = css(name). This is used to get one or more style values. The function returns a string, or, if multiple styles are called for, an object containing the styles as name-value pairs.
• css(name, value). This is used to set a single attribute value. The value parameter is either a string or a function returning the value for the style, with this signature: function(/*integer*/index, /*object*/element) : string. Index is the index of the element in the jQuery set and element is a reference to the element in question. In addition, the this variable will be set to reference the DOM element. Note that number values are converted to string, with "px" appended.
• css(object). This is used to set multiple style values in one go. Any property value in this object may be function - in which case it must be of the signature function(/*integer*/index, /*string*/currentValue) : string (see third example below). The style values are taken from the named properties of the object that is passed in.

In specifying style names, the css and DOM formatting are both supported (e.g. foreground-color vs. foregroundColor). jQuery allows for a nice shortcut when setting numeric values: You can pass a formula, e.g. "+=10" for numeric properties, in this case to increase the value by 10 px.

An example of retrieving a number of style values:

An example of setting style values:

The next example demonstrates using a function inside a composite object to set the left style property:

Setting and getting element width with the width method

Instead of using the css method to get or set element width, jQuery offers the width method dedicated to this purpose. It returns the computed width, i.e. the value that is current at any time. The value returned (or set) with this method represents the smallest kind of width for the element, in that it excludes padding, border and margin (see diagram). To get the width in pixels: var width = jQuerySet.width(). This returns the width as a number (in pixels). To set width use: jQuerySet.width(value). The value can be a number, which jQuery then takes to be pixels. If you want to define the width in another unit, pass a string with the type of unit appended, e.g. "200em". The value may also be a function, which is then expected to return the value for the width. The function must have the signature function(/*integer*/ index, /*object*/ element), where index is the index in the jQuery set of the element in question, and element is a reference to that element. In addition, the this variable is set to point to the same element (see this example). An example that sets and gets the width:

Setting and getting element width with the innerWidth method

This method returns or sets the computed inner width, i.e. the value that is current at any time. The value returned (or set) with this method represents the width of the element including padding, but excluding border and margin (see diagram). To get the inner width in pixels: var innerWidth = jQuerySet.innerWidth(). This returns the inner width as a number (in pixels). To set inner width use: jQuerySet.innerWidth(value). The value can be a number, which jQuery then takes to be pixels. If you want to define the inner width in another unit, pass a string with the type of unit appended, e.g. "200em". The value may also be a function, which is then expected to return the value for the inner width. The function must have the signature function(/*integer*/ index, /*object*/ element), where index is the index in the jQuery set of the element in question, and element is a reference to that element. In addition, the this variable is set to point to the same element (see this example). An example that sets and gets the width and inner width:

Setting and getting element width with the outerWidth method

This method returns or sets the computed outer width, i.e. the value that is current at any time. The value returned (or set) with this method represents the width of the element including padding and border, but without any margin (see diagram). To get the outer width in pixels: var outerWidth = jQuerySet.outerWidth([withMargin]). This returns the outer width as a number (in pixels), optionally including the margin. To set outer width use: jQuerySet.outerWidth(value). The value can be a number, which jQuery then takes to be pixels. If you want to define the outer width in another unit, pass a string with the type of unit appended, e.g. "200em". The value may also be a function, which is then expected to return the new value for the outer width. The function must have the signature function(/*integer*/ index, /*object*/ element), where index is the index in the jQuery set of the element in question, and element is a reference to that element. In addition, the this variable is set to point to the same element (see this example). In the next example, width, outer width and outer width including margin are obtained. After increasing the outer width by 20 px, the same properties are queried again:

Setting and getting element height with the height method

To set or get element height, use the height method. It works in the same way as the width method. The value returned (or set) with this method represents the smallest kind of height for the element, in that it excludes padding, border and margin (see diagram). To get the height in pixels: var height = jQuerySet.height(). This returns the height as a number (in pixels). To set height use: jQuerySet.height(value). The value can be a number, which jQuery then takes to be pixels. If you want to define the height in another unit, pass a string with the type of unit appended, e.g. "200em". The value may also be a function, which is then expected to return the value for the height. The function must have the signature function(/*integer*/ index, /*object*/ element), where index is the index in the jQuery set of the element in question, and element is a reference to that element. In addition, the this variable is set to point to the same element. An example that gets and sets the height, using a function:

Setting and getting element height with the innerHeight method

This method returns or sets the computed inner height, i.e. the value that is current at any time. The value returned (or set) with this method represents the height of the element including padding, but excluding border and margin (see diagram). To get the inner height in pixels: var innerHeight = jQuerySet.innerHeight(). This returns the inner height as a number (in pixels). To set inner height use: jQuerySet.innerHeight(value). The value can be a number, which jQuery then takes to be pixels. If you want to define the inner height in another unit, pass a string with the type of unit appended, e.g. "200em". The value may also be a function, which is then expected to return the value for the inner height. The function must have the signature function(/*integer*/ index, /*object*/ element), where index is the index in the jQuery set of the element in question, and element is a reference to that element. In addition, the this variable is set to point to the same element (see this example). An example that sets and gets the height and inner height:

Setting and getting element height with the outerHeight method

This method returns or sets the computed outer height, i.e. the value that is current at any time. The value returned (or set) with this method represents the height of the element including padding and border, but without any margin (see diagram). To get the outer height in pixels: var outerHeight = jQuerySet.outerHeight([withMargin]). This returns the outer height as a number (in pixels), optionally including the margin. To set outer height use: jQuerySet.outerHeight(value). The value can be a number, which jQuery then takes to be pixels. If you want to define the outer height in another unit, pass a string with the type of unit appended, e.g. "200em". The value may also be a function, which is then expected to return the new value for the outer height. The function must have the signature function(/*integer*/ index, /*object*/ element), where index is the index in the jQuery set of the element in question, and element is a reference to that element. In addition, the this variable is set to point to the same element (see this example). In the next example, height, outer height and outer height including margin are obtained. After increasing the outer height by 20 px, the same properties are queried again:

Setting and getting element position with the offset method

This method gets or sets the values in pixels for element left and top relative to the document left and top. The position is defined in terms of an object with numeric left and top properties. To retrieve the position use var offset = jQuerySet.offset(). To set the position use jQuerySet.offset(position). When setting the position, it is also possible to use a function, which is then invoked for each element in the jQuery set. The function must have the signature function(/*integer*/ index, /*object*/ element), where index is the index in the jQuery set of the element in question, and element is a reference to that element. In addition, the this variable is set to point to the same element (see this example).

An example that moves an element 100 pixels to the right:

Note that setting position with the offset method implicitly sets the style.position to relative. This is demonstrated by the example below, which is functionally equivalent to the above.

Getting element position with the position method

This method gets the values in pixels for element left and top relative to the offset parent, which is the nearest ancestor with style.position equal to relative, absolute or fixed. The position is defined in terms of an object with numeric left and top properties. To retrieve the position use var position = jQuerySet.position().

An example that gets the position of an element:

Getting and setting element scroll position with the scrollTop method

This method gets or sets the values in pixels for the position of the vertical scroll bar of the elements in the jQuery set. To retrieve the scroll bar position use var scrollTop = jQuerySet.scrollTop() and to set it use jQuerySet.scrollTop(/*integer*/ value).

An example:

Getting and setting element scroll position with the scrollLeft method

This method gets or sets the values in pixels for the position of the horizontal scroll bar of the elements in the jQuery set. To retrieve the scroll bar position use var scrollTop = jQuerySet.scrollLeft() and to set it use jQuerySet.scrollLeft(/*integer*/ value).

See the scrollTop method for an example.

Updating the document content with the html method

This method gets or sets the inner html of the elements in the jQuery set. To retrieve the inner html of the first element in the set, use var innerHtml = jQuerySet.html() and to set it for all elements in the set, use jQuerySet.html(/*string or function*/ value). Instead of passing a string for the value, it is also possible to specify a function of the format function(/*integer*/ index, /*string*/ currentHtml) returning a string where the this variable will be set to reference the element in question. The following example replaces the inner html of an element:

Updating the text content with the text method

This method gets or sets the content of the elements in the jQuery set. To retrieve the combined text content of the elements in the set, use var text = jQuerySet.text() and to set it for all elements in the set, use jQuerySet.text(/*string or function*/ value). Any characters with special meaning in html, such as angle brackets, will be escaped. Instead of passing a string for the value, it is also possible to specify a function of the format function(/*integer*/ index, /*string*/ currentText) returning a string where the this variable will be set to reference the element in question. Note that setting element content with this function wipes all preexisting content, including child elements. The following example replaces the content of two elements:

Creating or moving elements with the append method

The append method is quite a versatile means of creating or moving elements, depending on how it is used. In any case, elements are appended to the existing content of the elements in the jQuery set. Also, any source elements are removed (does not apply to the cases of passing html or a function for the parameter, since there are no source elements in those cases). The method accepts an arbitrary number of arguments (although at least one!), each being of one of these types:

• A string containing html. This is equivalent to calling the html method.
• A reference to a DOM element.
• An array of DOM elements.
• A jQuery set.
• A function that is called for each target element. The function must be of the format function(/*integer*/ index, /*string*/ currentContent) returning a string where the this variable will be set to reference the element in question.

A simple example that moves an element from one element to another:

The next example illustrates passing multiple arguments, namely a jQuery set and an array of elements.

The next example illustrates using a function to add content to elements.

Creating or moving elements with the prepend method

The prepend method is the mirror image of the append method, prepending to the existing content, rather than appending. Element contents are added before the existing content of the elements in the jQuery set. Also, any source elements are removed (does not apply to the cases of passing html or a function for the parameter, since there are no source elements in those cases). The method accepts an arbitrary number of arguments (although at least one!), each being of one of these types:

• A string containing html.
• A reference to a DOM element.
• An array of DOM elements.
• A jQuery set.
• A function that is called for each target element. The function must be of the format function(/*integer*/ index, /*string*/ currentContent) returning a string where the this variable will be set to reference the element in question.

A simple example that moves an element from one element to another (contrast this with the equivalent example for the append method):

Creating or moving elements with the after method

While the append method moves elements to inside target nodes, the after method moves elements to a position just after the target element(s). Any source elements are removed (does not apply to the cases of passing html or a function for the parameter, since there are no source elements in those cases). The method accepts an arbitrary number of arguments (although at least one!), each being of one of these types:

• A string containing html.
• A reference to a DOM element.
• An array of DOM elements.
• A jQuery set.
• A function that is called for each target element. The function must be of the format function(/*integer*/ index, /*string*/ currentContent) returning a string where the this variable will be set to reference the element in question.

A simple example that moves an element to positions after the target elements:

Creating or moving elements with the before method

While the prepend method moves elements to inside target nodes, the before method moves elements to a position just before the target element(s). Any source elements are removed (does not apply to the cases of passing html or a function for the parameter, since there are no source elements in those cases). The method accepts an arbitrary number of arguments (although at least one!), each being of one of these types:

• A string containing html.
• A reference to a DOM element.
• An array of DOM elements.
• A jQuery set.
• A function that is called for each target element. The function must be of the format function(/*integer*/ index, /*string*/ currentContent) returning a string where the this variable will be set to reference the element in question.

A simple example that moves an element to positions before the target elements:

Creating or moving elements with the appendTo method

This method is in one way the opposite of the append method in that source and target are reversed. With the appendTo method, source elements are the elements contained in the jQuery set that the method is called on. The source elements are appended to the existing content of the elements specified in the argument. Also, any source elements are removed (does not apply to the cases of passing html or a function for the parameter, since there are no source elements in those cases). The method accepts an arbitrary number of arguments (although at least one!), each being of one of these types:

• A string containing html. This is equivalent to calling the html method.
• A reference to a DOM element.
• An array of DOM elements.
• A jQuery set.
• A string containing a jQuery expression.

A simple example that moves an element to inside two other elements:

Creating or moving elements with the prependTo method

This method is in one way the opposite of the prepend method in that source and target are reversed. With the prependTo method, source elements are the elements contained in the jQuery set that the method is called on. The source elements are prepended to the existing content of the elements specified in the argument. Also, any source elements are removed (does not apply to the cases of passing html or a function for the parameter, since there are no source elements in those cases). The method accepts an arbitrary number of arguments (although at least one!), each being of one of these types:

• A string containing html. This is equivalent to calling the html method.
• A reference to a DOM element.
• An array of DOM elements.
• A jQuery set.
• A string containing a jQuery expression.

A simple example that moves an element to inside two other elements:

Creating or moving elements with the insertAfter method

This method is in one way the opposite of the after method in that source and target are reversed. With the insertAfter method, source elements are the elements contained in the jQuery set that the method is called on. The source elements are appended after the elements specified in the argument. Also, any source elements are removed (does not apply to the cases of passing html or a function for the parameter, since there are no source elements in those cases). The method accepts an arbitrary number of arguments (although at least one!), each being of one of these types:

• A string containing html. This is equivalent to calling the html method.
• A reference to a DOM element.
• An array of DOM elements.
• A jQuery set.
• A string containing a jQuery expression.

A simple example that moves two elements to a position after another element:

Creating or moving elements with the insertBefore method

This method is in one way the opposite of the before method in that source and target are reversed. With the insertBefore method, source elements are the elements contained in the jQuery set that the method is called on. The source elements are prepended before the elements specified in the argument. Also, any source elements are removed (does not apply to the cases of passing html or a function for the parameter, since there are no source elements in those cases). The method accepts an arbitrary number of arguments (although at least one!), each being of one of these types:

• A string containing html. This is equivalent to calling the html method.
• A reference to a DOM element.
• An array of DOM elements.
• A jQuery set.
• A string containing a jQuery expression.

A simple example that moves two elements to a position before another element:

Wrapping elements with the wrap method

The wrap method is defined as jQuerySet.wrap(wrapIn) and returns this. This method wraps existing elements inside elements that are either created from scratch or cloned from existing elements. The elements contained in the jQuery set that the method is called on will be wrapped by copies of the element specified in the argument. A variety of types can be passed as argument to specify the element to serve as template for wrapping elements:

• A string containing an html fragment.
• A string containing a jQuery expression - only the first element selected by this expression will be used as template for wrapping elements.
• A reference to a DOM element.
• A jQuery set - only the first element in the set will be used as template for wrapping elements.
• A function that is called for each target element and returning either an html fragment or a jQuery object. The function must be of the format function(/*integer*/ index), where the this variable will be set to reference the element in question.

A simple example that wraps two elements in a copy of an existing element:

An example of using a function to specify the markup of the wrapping element:

An example of using a query expression (not recommended!) to specify the wrapping element:

By specifying the query expression p:first one would think that the first p element would serve as template for wrapping both span elements. But it seems that the query expression is reevaluated for each element. In the above example, the newly created p element (1) gets to serve as template for wrapping the next span element (2). This is hardly what one would want.

Wrapping elements with the wrapAll method

The wrapAll method is defined as jQuerySet.wrapAll(wrapIn) and returns this. This method wraps existing elements inside one element that is either created from scratch or cloned from an existing element. The elements contained in the jQuery set that the method is called on will be wrapped by a copy of the element specified in the argument. A variety of types can be passed as argument to specify the element to serve as template for wrapping elements:

• A string containing an html fragment.
• A string containing a jQuery expression - only the first element selected by this expression will be used as template for wrapping elements.
• A reference to a DOM element.
• A jQuery set - only the first element in the set will be used as template for wrapping elements.
• A function. This is bogus and should not be used in jQuery 2.1.4 or previously.

A simple example that wraps two elements in a new paragraph element:

"); var html = jQuery("#outer").html(); console.log(html); /* <p><span id="s0">span0</span><span id="s2">span2</span></p> <span id="s1">span1</span> */ </script>

Wrapping elements with the wrapInner method

The wrapInner method is defined as jQuerySet.wrapInner(wrapIn) and returns this. Whereas the wrap method wraps the entire element, this method wraps only the element contents, including child elements. This method wraps element content inside elements that are either created from scratch or cloned from existing elements. The contents of elements contained in the jQuery set that the method is called on will be wrapped by copies of the element specified in the argument. A variety of types can be passed as argument to specify the element to serve as template for wrapping elements:

• A string containing an html fragment.
• A string containing a jQuery expression - only the first element selected by this expression will be used as template for wrapping elements.
• A reference to a DOM element.
• A jQuery set - only the first element in the set will be used as template for wrapping elements.
• A function that is called for each target element and returning either an html fragment or a jQuery object. The function must be of the format function(/*integer*/ index), where the this variable will be set to reference the element in question.

A simple example that wraps the contents of two elements in new span elements:

Unwrapping elements with the unwrap method

The unwrap method removes the parent elements containing the elements contained in the jQuery set. All content in the removed nodes is preserved.

A simple example that removes the parent nodes of span elements:

Removing stuff with the detach method

The detach method removes elements from the DOM. However, the elements, together with child nodes, data, event handlers and everything, are still held in the jQuery set after removal. A common scenario where this functionality comes in handy is when you remove elements from the DOM, apply changes to them and then put them back in. If you are going to apply changes to a lot of elements, this is likely to perform better (and appear better to the user), because the browser will not have to refresh things on each tiny update. The method has the signature jQuerySet.detach([selector]) and returns a reference to the same jQuery set. The selector argument takes a jQuery expression that allows one to further filter exactly which elements will be detached.

An example that removes an element, applies an update and reinserts it at a different location:

Removing stuff with the remove method

The remove method removes elements from the DOM. After removal, the elements are still held in the jQuery set and can be reinserted to the document, but event handlers and any data are gone. Contrast this with the detach method. The remove method has the signature jQuerySet.remove([selector]) and returns a reference to the same jQuery set. The selector argument takes a jQuery expression that allows one to further filter exactly which elements will be removed.

An example that removes an element and reinserts it at a different location:

Removing stuff with the empty method

The empty method removes contents, including child nodes, from elements. The empty method has the signature jQuerySet.empty() and returns a reference to the same jQuery set.

An example that removes element content:

Cloning elements with the clone method

The clone method copies elements from the DOM. The method performs a deep cloning, in that the entire subtrees of elements are copied. After cloning, the new elements can be inserted into the document using a method such as the appendTo method. The clone method has the signature jQuerySet.clone([/*boolean*/ copyEventHandlersAndData[, /*boolean*/ copyChildrenEventHandlersAndData]]) and returns a reference to a new jQuery set containing the cloned elements. The first parameter specifies if event handlers and data attached to the elements in the jQuery set are to be copied, and the second parameter specifies the same thing for child elements.

The behaviour of the two parameters is a bit counterintuitive. The table below summarizes whether data and event handlers are preserved in the cloned elements (column Element) and their children (column Children), depending on whether you pass true or false for the two arguments or omit a value alltogether (void):

An example that clones an element and inserts the new element:

Moving or creating elements with the replaceWith method

The replaceWith method removes elements from the DOM and inserts them in another place in place of existing content. Contrast this with the append method. It can also be used to create entirely new content instead of moving existing elements. The method has the signature jQuerySet.replaceWith(content) and returns a reference to a new jQuery set containing the elements that were replaced. The single parameter can take the following types:

• A string containing an html fragment to create new content.
• A reference to a DOM element to be moved.
• An array of DOM elements to be moved.
• A jQuery set containing elements to be moved.
• A function that is called for each element to be replaced and returning either of the four above types. The function must be of the format function(/*integer*/ index, /*string*/ currentContent), where the this variable will be set to reference the element to be replaced. The index parameter contains the index of the element in the jQuery set, and the currentContent parameter contains the inner html of the same element.

In all cases, the elements that the method is called on are removed.

An example that uses a function to change the node name of an element:

Moving elements with the replaceAll method

The replaceAll method removes elements from the DOM and inserts them in another place in place of existing content. This method is the mirror image of the replaceWith method in that source and target are reversed - with the replaceAll method the elements to be replaced are specified in the single argument. The method has the signature jQuerySet.replaceAll(target) and returns a reference to the jQuery set that the method was called on. The single parameter can take the following types:

• A string containing a jQuery expression identifying the elements to be replaced.
• A reference to a DOM element to be replaced.
• An array of DOM elements to be replaced.
• A jQuery set containing elements to be replaced.

In all cases, the elements defined in the argument are removed and the elements contained in the jQuery set that the method is called on are moved.

An example that uses a jQuery expression and replaces two elements:

Next chapter