DOM Manipulation

Code

// Getters and setters
$("#title").text("New Title");
const html = $("#box").html();
$("#img").attr("src", "pic.jpg").attr("alt", "Picture");
$("input").val("default");

// Class manipulation
$("#el").addClass("active").removeClass("hidden");
$("#el").toggleClass("open");

// Inserting content
$("ul").append("<li>End</li>");
$("ul").prepend("<li>Start</li>");
$("<li>new</li>").appendTo("#list");

// Wrapping and removing
$("#box").wrap("<div class='wrap'></div>");
$("#item").remove();          // removes element + listeners
$("#item").empty();           // removes children only

Explanation

jQuery methods double as getters (no argument) and setters (with argument). append/prepend/appendTo insert DOM nodes at different positions. remove() detaches the element and its data, while empty() clears just the children.

More jQuery Snippets