jQuery: DOM Manipulation Methods

Method Description
append() Inserts DOM elements at the end of selected element(s).

Example: $('div').append('<p>This is paragraph.</p>');
appendTo() Perform 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.

Example: $('<p>This is paragraph.</p>').appendTo('div');
before() Inserts content (new or existing DOM elements) before specified element(s) by a selector.

Example: $('#myDiv').before('<p>This is paragraph.</p>');
after() Inserts content (new or existing DOM elements) after selected element(s) by a selector.

Example: $('#myDiv').after('<p>This is paragraph.</p>');
detach() Removes the specified element(s).

Example: $('div').detach();
empty() Removes all child element(s) of selected element(s).

Example: $('div').empty();
html() Get or Set html content to the selected element(s).

Example: $('div').html();
$('div').html('<p>This is paragraph.</p>');
insertAfter() Insert DOM element(s) after selected element(s). Perform same task as after() method, the only difference is syntax.

Example:$('<p>This is paragraph.</p>').insertAfter('#myDiv');
insertBefore() Insert DOM element(s) before selected element(s). Perform same task as before() method, the only difference is syntax.

Example:$('<p>This is paragraph.</p>').insertBefore('#myDiv');
prepend() Insert content at the beginning of the selected element(s).

Example:$('div').prepend('<p>This is paragraph.</p>');
prependTo() Insert content at the beginning of the selected element(s). Perform same task as prepend() method, the only difference is syntax.

Example:$('<p>This is paragraph.</p>').prependTo('div');
prop() Get or Set the value of specified property of selected element(s).

Example:$('div').prop('contenteditable','true');
$('div').prop('contenteditable');
remove() Removes selected element(s) from the DOM.

Example:$('div').remove();
removeAttr() Removes specified attribute from selected element(s).

Example:$('div').removeAttr('class');
removeProp() Removes specified property from selected element(s).

Example:$('div').removeProp('contenteditable');
replaceAll() Replace all target element(s) with specified element.

Example: $('<span>This is span</span>').replaceAll('p');
replaceWith() Replace all target element(s) with specified element and return the set of elements which was removed.

Example:var replacedElements = $('div').replaceWith('<p>');
text() Get or set text content of the selected element(s).

Example:$('p').text('This is new text.');
wrap() Wrap an HTML structure around each selected element(s).

Example:$('span').wrap('<p></p>');
unwrap() Remove the parents of selected element(s).

Example:$('p').unwrap();
val() Get or set the value of selected element(s)

Example:$('#delButton').val('Delete');
wrapAll() Combine all the selected element(s) and wrap them with specified HTML.

Example:$('p').val('<div>');
wrapInner() Wrap an inner html of selected element(s) with specified HTML.

Example:$('div').val('<span>');

CSS Methods

CSS Methods Description
css() Get or set style properties to the selected element(s).

Example:$('#myDiv').css('background-color','yellow');
addClass() Add one or more CSS class to the selected element(s).

Example:$('#myDiv').addClass('myCSSClass');
hasClass() Determine whether any of the selected elements are assigned the given CSS class.

Example:$('#myDiv').hasClass();
removeClass() Remove a single class, multiple classes, or all classes from the selected element(s).

Example:$('#myDiv').removeClass();
toggleClass() Toggles between adding/removing classes to the selected elements

Example:$('#myDiv').toggleClass('myAnotherCSSClass');

Dimensions Methods

Dimensions Methods Description
height() Get or set height of the selected element(s).

Example:$('#myDiv').height();
$('#myDiv').height(200);
innerHeight() Get or set inner height (padding + element's height) of the selected element(s).

Example:$('#myDiv').innerHeight();
$('#myDiv').innerHeight(200);
outerHeight() Get or set outer height (border + padding + element's height) of the selected element(s).

Example:$('#myDiv').outerHeight();
$('#myDiv').outerHeight(200);
offset() Get or set left and top coordinates of the selected element(s).

Example:var ofs = $('#myDiv').offset();
$('#myDiv').offset({ left:100, top:200});
position() Get the current coordinates of the selected element(s).

Example:var pos = $('#myDiv').position();
alert(pos.left + ',' + pos.top);
width() Get or set the width of the selected element(s).

Example:$('#myDiv').width();
$('#myDiv').width(200);
innerWidth() Get or set the inner width (padding + element's width) of the selected element(s).

Example:$('#myDiv').innerWidth();
$('#myDiv').innerWidth(200);
outerWidth() Get or set outer width (border + padding + element's width) of the selected element(s).

Example:$('#myDiv').outerWidth();
$('#myDiv').outerWidth(200);
scrollLeft() Get or set the current horizontal position of the scrollable content of selected element.

Example:$('#myDiv').scrollLeft();
$('#myDiv').scrollLeft(100);
scrollTop() Get or set the current vertical position of the scrollable content of selected element.

Example:$('#myDiv').scrollTop();
$('#myDiv').scrollTop(100);