jQuery DOM Manipulation

$('#title').text('New text');
$('#title').html('<b>Bold</b>');
$('#title').attr('data-id', '42');
$('#title').val('New value');

$('ul').append('<li>New item</li>');    // inside, at end
$('ul').prepend('<li>First</li>');      // inside, at start
$('ul').after('<p>Below</p>');          // outside, after
$('ul').before('<p>Above</p>');         // outside, before

$('#item').remove();      // remove entirely
$('#item').detach();      // remove but keep jQuery data
$('#item').empty();       // remove children (keep the element)

$('#box').addClass('highlight');
$('#box').removeClass('highlight');
$('#box').toggleClass('highlight');
$('#box').hasClass('highlight');
$('#box').css('color', 'red');
$('#box').css({ 'font-size': '18px', 'margin': '10px' });