jQuery DOM manipulation


DOM manipulation in jQuery refers to the process of dynamically changing the structure, content, or style of HTML elements on a web page using jQuery methods. This allows you to interact with and modify the Document Object Model (DOM) efficiently and easily.

Basic Concepts of DOM Manipulation

  1. Selecting Elements: Before you can manipulate elements, you need to select them using jQuery selectors.
  2. Modifying Content: Change the text or HTML content of elements.
  3. Changing Attributes: Modify or set attributes of elements.
  4. Adding or Removing Elements: Insert new elements into the DOM or remove existing ones.
  5. Manipulating Styles: Apply or change CSS styles of elements.

Basic Syntax

$(selector).action();
  • selector - The jQuery selector used to target specific elements.
  • action() - The jQuery method used to perform operations on the selected elements.

Example Usages

1. Selecting Elements

// Select elements with the class "example" $(".example");

Explanation:

  • $(".example") selects all elements with the class example.

2. Modifying Content

Changing Text Content:

// Change the text content of a paragraph with ID "example" $("#example").text("New text content");

Changing HTML Content:

// Change the HTML content of a div with ID "example" $("#example").html("<strong>New HTML content</strong>");

Explanation:

  • $("#example").text("New text content") sets the text content of the selected element.
  • $("#example").html("<strong>New HTML content</strong>") sets the HTML content of the selected element.

3. Changing Attributes

Setting Attributes:

// Set the src attribute of an image with ID "myImage" $("#myImage").attr("src", "new-image.jpg");

Getting Attributes:

// Get the value of the href attribute of a link with ID "myLink" var hrefValue = $("#myLink").attr("href");

Explanation:

  • $("#myImage").attr("src", "new-image.jpg") changes the src attribute of the image.
  • $("#myLink").attr("href") retrieves the value of the href attribute from the link.

4. Adding or Removing Elements

Appending Elements:

// Append a new paragraph to a div with ID "container" $("#container").append("<p>New paragraph</p>");

Prepending Elements:

// Prepend a new paragraph to a div with ID "container" $("#container").prepend("<p>New paragraph</p>");

Removing Elements:

// Remove an element with the class "remove-me" $(".remove-me").remove();

Explanation:

  • $("#container").append("<p>New paragraph</p>") adds a new paragraph at the end of the #container div.
  • $("#container").prepend("<p>New paragraph</p>") adds a new paragraph at the beginning of the #container div.
  • $(".remove-me").remove() removes all elements with the class remove-me.

5. Manipulating Styles

Applying Inline Styles:

// Apply inline styles to a div with ID "example" $("#example").css({ "color": "red", "background-color": "yellow" });

Adding or Removing CSS Classes:

// Add a class to an element with ID "example" $("#example").addClass("new-class"); // Remove a class from an element with ID "example" $("#example").removeClass("old-class"); // Toggle a class on an element with ID "example" $("#example").toggleClass("toggle-class");

Explanation:

  • $("#example").css({...}) applies the specified styles to the selected element.
  • $("#example").addClass("new-class") adds a class to the element.
  • $("#example").removeClass("old-class") removes a class from the element.
  • $("#example").toggleClass("toggle-class") toggles the presence of a class on the element.

Performance Considerations

  • Minimize DOM Access: Accessing and manipulating the DOM can be slow; try to minimize the number of DOM operations.
  • Batch Manipulations: Combine multiple changes into a single operation when possible to improve performance.
  • Use jQuery Efficiently: Use jQuery methods that are optimized for performance and avoid excessive use of complex selectors.