? jQuery DOM Manipulation in JavaScript

What is jQuery DOM?

• jQuery simplifies selecting, traversing, manipulating, and modifying the HTML DOM (Document Object Model).

• Makes it easier and more concise than vanilla JavaScript, especially for older browsers.

Common jQuery DOM Operations

1. Selecting Elements

const paragraphs = $("p");       // Select all <p> elementsconst mainDiv = $("#main");      // Select element by IDconst items = $(".item");        // Select elements by class

2. Getting and Setting Content

• Get content:

const text = $("#myDiv").text();       // Gets text contentconst html = $("#myDiv").html();       // Gets HTML inside element

• Set content:

$("#myDiv").text("Hello World!");      // Set text content$("#myDiv").html("<b>Hello</b>");      // Set HTML content

3. Creating and Inserting Elements

$("<p>New Paragraph</p>").appendTo("#container");   // Add new paragraph inside #container$("#container").prepend("<h2>Title</h2>");          // Insert at beginning$("#item").before("<hr>");                           // Insert before #item$("#item").after("<hr>");                            // Insert after #item

4. Removing Elements

$("#oldItem").remove();        // Remove element and its data/events$("#oldItem").detach();        // Remove element but keep data/events for later reuse

5. Traversing the DOM

$("#list").children();         // Get direct children$("#item").parent();           // Get parent$("#item").siblings();         // Get siblings$("#item").find(".child");     // Find descendants matching selector

6. Attributes and Properties

const href = $("a").attr("href");            // Get attribute$("img").attr("src", "image.jpg");           // Set attributeconst isChecked = $("#checkbox").prop("checked");  // Get property$("#checkbox").prop("checked", true);               // Set property

Example: Add a New Item to a List

<ul id="fruits">  <li>Apple</li>  <li>Banana</li></ul><script>  $("#fruits").append("<li>Orange</li>");</script>

Summary

Want me to show you how to handle events with jQuery DOM or how to animate DOM elements with jQuery?