Tutorialsteacher

Follow Us

jQuery: DOM Manipulation Methods

MethodDescription
appendInserts DOM elements at the end of selected element(s).
appendToPerform same task as append() method. The only difference is syntax. Here, first specify DOM elements as a string which you want to insert and then call appendTo() method with selector expression to select the elements where you want to append the specified DOM elements.
beforeInserts content (new or existing DOM elements) before specified element(s) by a selector.
afterInserts content (new or existing DOM elements) after selected element(s) by a selector.
detachRemoves the specified element(s).
emptyRemoves all child element(s) of selected element(s).
htmlGet or Set html content to the selected element(s).
insertAfterInsert DOM element(s) after selected element(s). Perform same task as after() method, the only difference is syntax.
insertBeforeInsert DOM element(s) before selected element(s). Perform same task as before() method, the only difference is syntax.
prependInsert content at the beginning of the selected element(s).
prependToInsert content at the beginning of the selected element(s). Perform same task as prepend() method, the only difference is syntax.
propGet or Set the value of specified property of selected element(s).
removeRemoves selected element(s) from the DOM.
removeAttrRemoves specified attribute from selected element(s).
removePropRemoves specified property from selected element(s).
replaceAllReplace all target element(s) with specified element.
replaceWithReplace all target element(s) with specified element and return the set of elements which was removed.
textGet or set text content of the selected element(s).
wrapWrap an HTML structure around each selected element(s).
unwrapRemove the parents of selected element(s).
valGet or set the value of selected element(s)
wrapAllCombine all the selected element(s) and wrap them with specified HTML.
wrapInnerWrap an inner html of selected element(s) with specified HTML.

CSS Methods

CSS MethodsDescription
cssGet or set style properties to the selected element(s).
addClassAdd one or more CSS class to the selected element(s).
hasClassDetermine whether any of the selected elements are assigned the given CSS class.
removeClassRemove a single class, multiple classes, or all classes from the selected element(s).
toggleClassToggles between adding/removing classes to the selected elements

Dimensions Methods

Dimensions MethodsDescription
heightGet or set height of the selected element(s).
innerHeightGet or set inner height (padding + element's height) of the selected element(s).
outerHeightGet or set outer height (border + padding + element's height) of the selected element(s).
offsetGet or set left and top coordinates of the selected element(s).
positionGet the current coordinates of the selected element(s).
widthGet or set the width of the selected element(s).
innerWidth()Get or set the inner width (padding + element's width) of the selected element(s).
outerWidthGet or set outer width (border + padding + element's width) of the selected element(s).
scrollLeftGet or set the current horizontal position of the scrollable content of selected element.
scrollTopGet or set the current vertical position of the scrollable content of selected element.