jQuery DOM Manipulation

Content

$("p").text("New text");          // set text
var txt = $("p").text();          // get text
$("p").html("<b>Bold</b>");    // set HTML
$("input").val("hello");          // set value
var v = $("input").val();         // get value

Attributes and CSS

$("img").attr("src", "new.jpg");
$("a").attr("href", "https://example.com");
$("p").css("color", "red");
$("p").css({"color": "red", "font-size": "18px"});

Classes

$("p").addClass("highlight");
$("p").removeClass("highlight");
$("p").toggleClass("active");
$("p").hasClass("active");  // returns bool

Adding / Removing Elements

$("ul").append("<li>New item</li>");
$("ul").prepend("<li>First item</li>");
$("p").after("<p>After</p>");
$("p").before("<p>Before</p>");
$("p").remove();
$("p").empty();  // remove children only