jQuery HTML/CSS Methods Complete Reference

Last Updated : 23 Jul, 2025

JQuery provides methods to control the DOM inefficient way. JQuery provides methods that act as getter, retrieving information from DOM elements like .attr(), .html(), and .val().

All the selectors included in CSS are supported in jQuery. jQuery CSS Methods are used to apply CSS properties on DOM elements.

Syntax:

$(selector).method(attribute.., function..)

Example: Set text syntax

HTML

<!DOCTYPE html>
<html>

<body>
    <h1>
    <center>
    Geeks <button onclick="function()">Click me
        </button>
    </center>
</h1>

    <script src=
"http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("p").text("Jquery_text_method");
            });
        });
    </script>

    <p>GeeksforGeeks</p>
    <p>Jquery</p>

</body>

</html>

Output:

The complete list of jQuery HTML/CSS Methods is given below:

Methods:

HTML/CSS Methods	Description
addClass()	Add more properties to each selected element.
after()	Insert content, specified by the parameter for each selected element in the set of matched elements.
append()	Insert some content at the end of the selected elements.
appendTo()	Insert an HTML element at the end of the selected element.
attr()	Return the attributes and values of the selected elements.
before()	Add the content before the selected element.
clone()	Make a copy of selected elements including their child nodes, text, and attributes.
css()	Change the style property of the selected element.
detach()	It removes the selected elements from the DOM tree including its all text and child nodes
empty()	Remove all child nodes and their content for the selected elements.
hasClass()	Check whether the elements with the specified class name exist or not.
height()	Check the height of an element.
innerHeight()	Check the inner height of the element including padding.
html()	Return the innerHTML content of the selected element.
innerWidth()	Return the width of the first matched element.
insertAfter()	Insert some HTML content after a specified element.
insertBefore()	Insert some HTML content before a specified element.
offset()	Returns the offset coordinates of the selected element.
offsetParent()	Find the first positioned parent element in the DOM tree.
outerHeight()	Find the outer height of the specified element.
outerWidth()	Return the value of outer width of an element which includes border & padding.
position()	Find the position of the first matched element relative to its parent element in the DOM tree.
prepend()	Insert a specified content at the beginning of the selected element.
prependTo()	Insert HTML elements or some content at the beginning of the selected element.
prop()	Return properties and values for the selected elements.
remove()	Remove all the selected elements including all the text.
removeAttr()	Remove one or more attributes from the selected elements.
removeClass()	Remove one or more class names from the selected element.
removeProp()	Remove the property set by the prop() method.
replaceAll()	Replace selected elements with new HTML elements.
replaceWith()	Replace the selected element with the new one.
scrollLeft()	Set the horizontal position of the scroll bar.
scrollTop()	Return the vertical top position of the scrollbar.
text()	Return the text content of the element.
toggleClass()	Change the class attached to the selected element.
unwrap()	Remove the parent element from the selected element.
val()	Set the value of an attribute for the selected elements.
width()	Check the width of an element.
wrap()	Wrap the specified element around the selected element.
wrapAll()	Specified elements will be wrapped against all the selected elements.
wrapInner()	Wrap the HTML element around the content of each selected element.