jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery Manipulate HTML and CSS

One very important part of jQuery is the possibility to manipulate the DOM.

jQuery provides methods to manipulate HTML elements, attributes and CSS in efficient way.


Class Attribute

These methods inspect and manipulate the class attribute(s) assigned to elements:

Method Description
addClass() Adds one or more class names to selected elements
hasClass() Checks if any of the selected elements have a specified class name
removeClass() Removes one or more classes from selected elements
toggleClass() Toggles between adding/removing one or more classes from selected elements

Copying

This method allows us to make copies of elements:

Method Description
clone() Create a deep copy of selected elements

DOM Insertion - Around

These methods allow us to insert new content surrounding existing content:

Method Description
wrap() Wraps HTML element(s) around each selected element
wrapAll() Wraps HTML element(s) around all selected elements
wrapInner() Wraps HTML element(s) around the content of each selected element

DOM Insertion - Inside

These methods allow us to insert new content inside an existing element:

Method Description
append() Inserts content at the end of selected elements
appendTo() Inserts HTML elements at the end of selected elements
html() Sets or gets the HTML content of selected elements
prepend() Inserts content at the beginning of selected elements
prependTo() Inserts HTML elements at the beginning of selected elements
text() Sets or gets the text content of selected elements

DOM Insertion - Outside

These methods allow us to insert new content outside an existing element:

Method Description
after() Inserts content after selected elements
before() Inserts content before selected elements
insertAfter() Inserts HTML elements after selected elements
insertBefore() Inserts HTML elements before selected elements

DOM Removal

These methods allow us to delete elements from the DOM:

Method Description
detach() Removes selected elements (keeps data and events)
empty() Removes all child nodes (including text nodes) from selected elements
remove() Removes the selected elements (including data and events)
unwrap() Removes the parent element of the selected elements

DOM Replacement

These methods are used to remove content from the DOM and replace it with new content:

Method Description
replaceAll() Replaces selected elements with new HTML elements
replaceWith() Replaces selected elements with new content

General Attributes

These methods get and set DOM attributes of elements:

Method Description
attr() Sets or returns attributes/values of selected elements
prop() Sets or returns properties/values of selected elements
removeAttr() Removes one or more attributes from selected elements
removeProp() Removes a property set by the prop() method
val() Sets or returns the value attribute of the selected elements (for form elements)

Style Methods

These methods get and set CSS-related properties of elements:

Method Description
css() Sets or returns one or more style properties for selected elements
height() Sets or returns the height of selected elements
innerHeight() Sets or returns the height of an element (includes padding, but not border)
innerWidth() Sets or returns the width of an element (includes padding, but not border)
offset() Sets or returns the offset coordinates for selected elements (relative to the document)
offsetParent() Returns the first positioned parent element
outerHeight() Sets or returns the height of an element (includes padding, border and optionally margin)
outerWidth() Sets or returns the width of an element (includes padding, border and optionally margin)
position() Returns the position of an element, relative to the offset parent
scrollLeft() Sets or returns the horizontal scrollbar position of selected elements
scrollTop() Sets or returns the vertical scrollbar position of selected elements
width() Sets or returns the width of selected elements