Core Features

DOM Manipulation

Change page content, add elements, modify styles, and update attributes with jQuery.

Reading and Writing Content

  • text() — get/set text content (no HTML)
  • html() — get/set inner HTML
  • val() — get/set form element values
  • attr() — get/set attributes
  • data() — get/set data attributes

Modifying the DOM

  • append() — add content to the end of selected element
  • prepend() — add content to the beginning
  • before() / after() — insert before/after selected element
  • remove() — remove element from DOM
  • empty() — remove all children
  • clone() — copy element

CSS and Classes

  • css() — get/set styles
  • addClass() — add CSS class
  • removeClass() — remove CSS class
  • toggleClass() — toggle CSS class
  • hasClass() — check if class exists

Example

javascript
// Read content
const text = $("h1").text();
const html = $(".description").html();
const inputVal = $("input").val();
const href = $("a").attr("href");

// Write content
$("h1").text("New Title");
$(".bio").html("<p>Updated <strong>bio</strong></p>");
$("input#name").val("Alice");
$("a").attr("href", "https://example.com");
$("img").attr({ src: "photo.jpg", alt: "Photo" });

// Adding elements
$("ul").append("<li>New item</li>");
$("ul").prepend("<li>First item</li>");
$("h1").after("<p>Subtitle goes here</p>");
$(".container").before("<header>Header</header>");

// Creating and inserting elements
const newCard = $("<div>", {
  class: "card",
  html: "<h3>New Card</h3><p>Content here</p>",
  css: { border: "1px solid #ccc", padding: "1rem" }
});
$(".grid").append(newCard);

// Removing elements
$(".outdated").remove();
$(".list").empty();  // remove all children

// CSS manipulation
$("p").css("color", "red");
$("div").css({ background: "blue", padding: "20px" });

// Class manipulation
$(".btn").addClass("active");
$(".btn").removeClass("disabled");
$(".menu").toggleClass("open");
const isActive = $(".tab").hasClass("active");
Try it yourself — JAVASCRIPT