jQuery - Modifying HTML Elements

Adding and Removing HTML Elements

Dynamically adding elements to our HTML page is a powerful tool—it lets us modify not only the formatting, but the actual structure of our websites in response to a user‘s actions.

.append() inserts the specified element as the last child of the target element.  // $(".info").append("<p>Stuff!</p>");

.prepend() inserts the specified elements as the first child of the target element. //$(".info").prepend("<p>Stuff!</p>");

.appendTo() does the same as .append(), $(‘<p>stuff!</p>‘).appendTo(‘.info‘);

.prepend() does the same as .prepend()

We can specify where in the DOM we insert an element with the .before() and .after() functions.

$(‘target‘).after(‘<tag>to add</tag>‘);

var $paragraph = $("p"); //existing elements
$("div").after($paragraph); //move it

//same as:
$("div").after($("p"));

Note: This does not copy the element from one location to another, it moves the original element effectively saving you from having to delete the original

.empty() deletes an element‘s content and all its descendants.

.remove() not only deletes an element‘s content, but deletes the element itself.

Modifying Classes and Content

.addClass() and .removeClass() can used to add or remove a class from an element.

$(‘selector‘).addClass(‘className‘);
$(‘selector‘).removeClass(‘className‘);

.toggleClass() function that does exactly this. If the element it‘s called on has the class it receives as an input, .toggleClass() removes that class; if the target element doesn‘t have that class, .toggleClass() adds

$("div").css("background-color","#008800");  //change css style

.html() and .val can update contents of our HTML elements.

$(‘div‘).html("I love jQuery!");

.val() is used to get the value of from elements.

$(‘input:checkbox:checked‘).val();