Open In App

jQuery HTML/CSS Methods Complete Reference

Improve
Improve
Like Article
Like
Save
Share
Report

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=
</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



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads