jQuery HTML/CSS Manipulation

jQuery provides a rich set of methods to manipulate the HTML content and CSS properties of elements dynamically. These methods allow you to alter the structure, style, and attributes of HTML elements in real-time.

1. Manipulating HTML Content

Method	Description	Syntax	Example
`html()`	Gets or sets the HTML content of an element.	`$(selector).html([value])`	`$("#div").html("New <b>HTML</b> content!");`
`text()`	Gets or sets the text content of an element.	`$(selector).text([value])`	`$("#div").text("Plain text content!");`
`val()`	Gets or sets the value of a form element.	`$(selector).val([value])`	`$("#input").val("New value!");`
`append()`	Adds content to the end of the selected element.	`$(selector).append(content)`	`$("#div").append("<p>Appended paragraph.</p>");`
`prepend()`	Adds content to the beginning of the selected element.	`$(selector).prepend(content)`	`$("#div").prepend("<p>Prepended paragraph.</p>");`
`after()`	Inserts content after the selected element.	`$(selector).after(content)`	`$("#div").after("<p>Content after div.</p>");`
`before()`	Inserts content before the selected element.	`$(selector).before(content)`	`$("#div").before("<p>Content before div.</p>");`
`remove()`	Removes the selected element from the DOM.	`$(selector).remove()`	`$("#div").remove();`
`empty()`	Removes all child elements and content of the element.	`$(selector).empty()`	`$("#div").empty();`
`replaceWith()`	Replaces the selected element with new content.	`$(selector).replaceWith(content)`	`$("#div").replaceWith("<p>Replaced with new content!</p>");`
`wrap()`	Wraps HTML structure around an element.	`$(selector).wrap(content)`	`$("p").wrap("<div class='wrapper'></div>");`
`unwrap()`	Removes the parent wrapping element.	`$(selector).unwrap()`	`$("span").unwrap();`
`clone()`	Creates a copy of the selected elements.	`$(selector).clone([withData])`	`let copy = $("#div").clone(); $("body").append(copy);`

2. Manipulating CSS Classes

Method	Description	Syntax	Example
`addClass()`	Adds one or more classes to the selected elements.	`$(selector).addClass(className)`	`$("#div").addClass("new-class");`
`removeClass()`	Removes one or more classes from the selected elements.	`$(selector).removeClass(className)`	`$("#div").removeClass("old-class");`
`toggleClass()`	Toggles the specified class on the selected elements.	`$(selector).toggleClass(className)`	`$("#div").toggleClass("highlight");`
`hasClass()`	Checks if the selected element has a specified class.	`$(selector).hasClass(className)`	`if ($("#div").hasClass("highlight")) { alert("Class exists!"); }`

3. Manipulating CSS Properties

Method	Description	Syntax	Example
`css()`	Gets or sets the CSS properties of elements.	`$(selector).css(property, value)`	`$("#div").css("background-color", "blue");`

Setting Multiple CSS Properties

$("#div").css({
    "color": "white",
    "background-color": "blue",
    "font-size": "20px"
});

Try It Now

Getting a CSS Property

let color = $("#div").css("color");
alert("The text color is: " + color);

Try It Now

4. Dimensions and Positioning

Method	Description	Syntax	Example
`width()`	Gets or sets the width of an element.	`$(selector).width([value])`	`$("#div").width(200);`
`height()`	Gets or sets the height of an element.	`$(selector).height([value])`	`$("#div").height(100);`
`innerWidth()`	Gets the width including padding.	`$(selector).innerWidth()`	`let width = $("#div").innerWidth();`
`innerHeight()`	Gets the height including padding.	`$(selector).innerHeight()`	`let height = $("#div").innerHeight();`
`outerWidth()`	Gets the width including padding and border.	`$(selector).outerWidth([includeMargin])`	`let width = $("#div").outerWidth(true);`
`outerHeight()`	Gets the height including padding and border.	`$(selector).outerHeight([includeMargin])`	`let height = $("#div").outerHeight(true);`
`offset()`	Gets the position relative to the document.	`$(selector).offset()`	`let pos = $("#div").offset(); alert("Top: " + pos.top + ", Left: " + pos.left);`
`position()`	Gets the position relative to the parent.	`$(selector).position()`	`let pos = $("#div").position(); alert("Top: " + pos.top + ", Left: " + pos.left);`

Example: HTML/CSS Manipulation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery HTML/CSS Manipulation</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: teal;
            color: white;
            text-align: center;
            line-height: 100px;
            margin: 20px auto;
            font-size: 18px;
        }
        .highlight {
            border: 3px solid yellow;
        }
    </style>
    <script>
        $(document).ready(function() {
            // HTML Content Manipulation
            $("#changeHtml").click(function() {
                $("#box").html("<b>New Content</b>");
            });
            $("#appendHtml").click(function() {
                $("#box").append("<p>Appended Paragraph</p>");
            });

            // CSS Class Manipulation
            $("#addClass").click(function() {
                $("#box").addClass("highlight");
            });
            $("#toggleClass").click(function() {
                $("#box").toggleClass("highlight");
            });

            // CSS Property Manipulation
            $("#changeCss").click(function() {
                $("#box").css("background-color", "purple");
            });

            // Dimensions and Positioning
            $("#dimensions").click(function() {
                alert("Width: " + $("#box").width() + ", Height: " + $("#box").height());
            });
        });
    </script>
</head>
<body>
    <div id="box">Box</div>
    <button id="changeHtml">Change HTML</button>
    <button id="appendHtml">Append HTML</button>
    <button id="addClass">Add Class</button>
    <button id="toggleClass">Toggle Class</button>
    <button id="changeCss">Change CSS</button>
    <button id="dimensions">Show Dimensions</button>
</body>
</html>

Try It Now

Conclusion

jQuery simplifies HTML and CSS manipulation, allowing developers to dynamically update content, classes, styles, and dimensions.