jQuery HTML / CSS Methods

jQuery provides a powerful set of HTML and CSS methods to dynamically modify web pages. Whether you need to change the content, attributes, or styles of elements, these methods make it simple and efficient.

At The Coding College, we break down these methods with practical examples to help you master them quickly!

What Are jQuery HTML / CSS Methods?

These methods allow you to:

  1. Get or set the content of HTML elements.
  2. Manipulate attributes and properties.
  3. Add, remove, or modify CSS styles and classes dynamically.

Common Use Cases:

  • Update the text or HTML of an element.
  • Dynamically apply or remove CSS classes.
  • Change the attributes like src, href, or value.

HTML Methods

1. html()

Gets or sets the HTML content of an element.

Syntax:

$(selector).html(); // Get HTML content
$(selector).html(newContent); // Set new HTML content

Example:

// Get the HTML content
let content = $("#box").html();
console.log(content);

// Set new HTML content
$("#box").html("<p>Updated HTML content</p>");

2. text()

Gets or sets the text content of an element, ignoring any HTML tags.

Syntax:

$(selector).text(); // Get text content
$(selector).text(newText); // Set new text content

Example:

// Get the text content
let textContent = $("#box").text();
console.log(textContent);

// Set new text content
$("#box").text("This is new text content.");

3. val()

Gets or sets the value of form inputs (e.g., text fields, dropdowns).

Syntax:

$(selector).val(); // Get the value
$(selector).val(newValue); // Set a new value

Example:

// Get the value of an input field
let inputValue = $("#username").val();
console.log(inputValue);

// Set a new value
$("#username").val("NewUserName123");

4. append() and prepend()

Add content inside an element:

  • append(): Adds content at the end.
  • prepend(): Adds content at the beginning.

Syntax:

$(selector).append(content);
$(selector).prepend(content);

Example:

$("#list").append("<li>New Item at the End</li>");
$("#list").prepend("<li>New Item at the Beginning</li>");

5. after() and before()

Add content outside an element:

  • after(): Adds content after the element.
  • before(): Adds content before the element.

Syntax:

$(selector).after(content);
$(selector).before(content);

Example:

$("#title").after("<p>Content added after the title.</p>");
$("#title").before("<p>Content added before the title.</p>");

6. remove()

Removes an element and its child elements.

Syntax:

$(selector).remove();

Example:

$("#box").remove();

7. empty()

Removes all child elements and content inside the selected element but keeps the element itself.

Syntax:

$(selector).empty();

Example:

$("#container").empty();

CSS Methods

1. css()

Gets or sets one or more CSS properties for an element.

Syntax:

$(selector).css(property); // Get a CSS property
$(selector).css(property, value); // Set a CSS property
$(selector).css({property1: value1, property2: value2}); // Set multiple properties

Example:

// Get the background color
let bgColor = $("#box").css("background-color");
console.log(bgColor);

// Set a single CSS property
$("#box").css("background-color", "lightblue");

// Set multiple CSS properties
$("#box").css({
    "border": "2px solid black",
    "padding": "10px"
});

2. addClass()

Adds one or more CSS classes to the selected elements.

Syntax:

$(selector).addClass(className);

Example:

$("#box").addClass("highlight");

3. removeClass()

Removes one or more CSS classes from the selected elements.

Syntax:

$(selector).addClass(className);

Example:

$("#box").addClass("highlight");

4. toggleClass()

Adds or removes a class based on its current presence.

Syntax:

$(selector).removeClass(className);

Example:

$("#box").removeClass("highlight");

5. width() and height()

Gets or sets the width and height of elements.

Syntax:

$(selector).width(); // Get width
$(selector).width(value); // Set width

$(selector).height(); // Get height
$(selector).height(value); // Set height

Example:

// Get dimensions
let boxWidth = $("#box").width();
let boxHeight = $("#box").height();
console.log(`Width: ${boxWidth}, Height: ${boxHeight}`);

// Set dimensions
$("#box").width(300).height(150);

Practical Example

HTML:

<div id="content-box" class="box" style="width: 200px; height: 100px; background: lightgray;">
    <p>This is a box.</p>
</div>
<button id="btn-update">Update Content</button>
<button id="btn-style">Apply Style</button>

jQuery Code:

// Update HTML content
$("#btn-update").click(function() {
    $("#content-box").html("<p>New content inside the box.</p>");
});

// Apply styles dynamically
$("#btn-style").click(function() {
    $("#content-box").css({
        "background-color": "lightblue",
        "border": "2px solid black",
        "padding": "10px"
    }).addClass("highlight");
});

Conclusion

jQuery HTML and CSS methods empower developers to dynamically modify web pages with ease. By mastering these methods, you can create interactive, user-friendly experiences.

Leave a Comment