jQuery HTML/CSS Methods Complete Reference

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