jQuery DOM Manipulation

Manipulating HTML elements and attributes

Get and Set Content

$('div').text(); # get text content
$('div').text('Hello'); # set text content
$('div').html(); # get HTML content
$('div').html('

Hello

'
); # set HTML content

Attributes

$('img').attr('src'); # get attribute
$('img').attr('src', 'image.jpg'); # set attribute
$('img').removeAttr('src'); # remove attribute

CSS Classes

$('div').addClass('active'); # add class
$('div').removeClass('active'); # remove class
$('div').toggleClass('active'); # toggle class
$('div').hasClass('active'); # check if has class

CSS Styles

$('div').css('color'); # get CSS property
$('div').css('color', 'red'); # set CSS property
$('div').css({ # set multiple properties
    'color': 'red',
    'font-size': '16px'
});

Add and Remove Elements

$('div').append('

Text

'
); # append inside $('div').prepend('

Text

'
); # prepend inside $('div').after('

Text

'
); # insert after $('div').before('

Text

'
); # insert before $('div').remove(); # remove element

Form Values

$('input').val(); # get input value
$('input').val('text'); # set input value