Skip to content
jQuery

DOM Manipulation

Get/set text, html, attributes, classes, and insert nodes.

#dom#manipulation

Code

jquery
// 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