DOM Manipulation Methods Reference:
| 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);
|