DOM manipulation methods

DOM manipulation methods are discussed in detail in Chapter 5.

Attributes and properties

Manipulation Method	Description
.attr(key)	Get the attribute named key
.attr(key, value)	Set the attribute named key to value
.attr(key, fn)	Set the attribute named key to the result of fn (called separately on each matched element)
.attr(map)	Set attribute values, given as key-value pairs
.removeAttr(key)	Remove the attribute named key
.prop(key)	Get the property named key
.prop(key, value)	Set the property named key to value
.prop(key, fn)	Set the property named key to the result of fn (called separately on each matched element)
.prop(map)	Set property values, given as key-value pairs.
.removeProp(key)	Remove the property named key
.addClass(class)	Add the given class to each matched element.
.removeClass(class)	Remove the given class from each matched element
.toggleClass(class)	Remove the given class if present, and add it if not, for each matched element
.hasClass(class)	Return true if any of the matched elements has the given class
.val()	Get the value attribute of the first matched element
.val(value)	Set the value attribute of each element to value

Content

Manipulation Method	Description
.html()	Get the HTML content of the first matched element
.html(value)	Set the HTML content of each matched element to value
.text()	Get the textual content of all matched elements as a single string
.text(value)	Set the textual content of each matched element to value

CSS

Manipulation Method	Description
.css(key)	Get the CSS attribute named key
.css(key, value)	Set the CSS attribute named key to value
.css(map)	Set CSS attribute values, given as key-value pairs

Dimensions

Manipulation Method	Description
.offset()	Get the top, and left, pixel coordinates of the first matched element, relative to the viewport
.position()	Get the top, and left, pixel coordinates of the first matched element, relative to the element returned by .offsetParent()
.scrollTop()	Get the vertical scroll position of the first matched element
.scrollTop(value)	Set the vertical scroll position of all matched elements to value
.scrollLeft()	Get the horizontal scroll position of the first matched element
.scrollLeft(value)	Set the horizontal scroll position of all matched elements to value
.height()	Get the height of the first matched element
.height(value)	Set the height of all matched elements to value
.width()	Get the width of the first matched element
.width(value)	Set the width of all matched elements to value
.innerHeight()	Get the height of the first matched element, including padding, but not border
.innerWidth()	Get the width of the first matched element, including padding, but not border
.outerHeight(includeMargin)	Get the height of the first matched element, including padding, border, and optional margin
.outerWidth(includeMargin)	Get the width of the first matched element, including padding, border, and optional margin

Insertion

Manipulation Method	Description
.append(content)	Insert content at the end of the interior of each matched element
.appendTo(selector)	Insert the matched elements at the end of the interior of the elements matched by selector
.prepend(content)	Insert content at the beginning of the interior of each matched element
.prependTo(selector)	Insert the matched elements at the beginning of the interior of the elements matched by selector
.after(content)	Insert content after each matched element
.insertAfter(selector)	Insert the matched elements after each of the elements matched by selector
.before(content)	Insert content before each matched element
.insertBefore(selector)	Insert the matched elements before each of the elements matched by selector
.wrap(content)	Wrap each of the matched elements within content
.wrapAll(content)	Wrap all of the matched elements as a single unit within content
.wrapInner(content)	Wrap the interior contents of each of the matched elements within content

Replacement

Manipulation Method	Description
.replaceWith(content)	Replace the matched elements with content
.replaceAll(selector)	Replace the elements matched by selector with the matched elements

Removal

Manipulation Method	Description
.empty()	Remove the child nodes of each matched element
.remove([selector])	Remove the matched nodes (optionally filtered by selector) from the DOM
.detach([selector])	Remove the matched nodes (optionally filtered by selector) from the DOM, preserving jQuery data attached to them
.unwrap()	Remove the element's parent

Copying

Manipulation Method	Description
.clone([withHandlers])	Make a copy of all matched elements, optionally also copying event handlers

Data

Manipulation Method	Description
.data(key)	Get the data item named key associated with the first matched element
.data(key, value)	Set the data item named key associated with each matched element to value
.removeData(key)	Remove the data item named key associated with each matched element