Jquery commonly used functions for operating html

1. text()

Get the text content of the element: $("#element").text();

Set the text content of the element: $("#element").text("New Text");

2. html()

Get the HTML content of the element: $("#element").html();

Set the HTML content of the element: $("#element").html("<p>New HTML</p>");

3. val()

Get the value of the form element: $("#input").val();

Set the value of the form element: $("#input").val("New Value");

4. attr()

Get the attribute value of the element: $("#element").attr("attributeName");

Set the attribute value of the element: $("#element").attr("attributeName", "newValue");

5. removeAttr()

Remove the specified attribute of the element: $("#element").removeAttr("attributeName");

6. addClass()

Add a class to the element: $("#element").addClass("className");

7. removeClass()

Remove a class from an element: $("#element").removeClass("className");

8. toggleClass()

Toggle class on element: $("#element").toggleClass("className");

9. hasClass()

Check if an element has the specified class: $("#element").hasClass("className");

10. prop() Get the property value of the element: $("#element").prop("propertyName"); Set the property value of the element: $("#element").prop("propertyName", "newValue") ;

11. removeProp() removes the specified attribute of the element: $("#element").removeProp("propertyName");

12. wrap() wraps elements in the specified HTML structure: $("#element").wrap("<div class='wrapper'></div>");

13. unwrap() removes the parent wrapper of an element: $("#element").unwrap();

14. wrapAll() wraps a set of elements in a specified HTML structure: $(".elements").wrapAll("<div class='wrapper'></div>");

15. wrapInner() wraps the content of the element in the specified HTML structure: $("#element").wrapInner("<div class='wrapper'></div>");

16. append() adds content at the end of the element: $("#element").append("<p>New Content</p>");

17. prepend() adds content at the beginning of the element: $("#element").prepend("<p>New Content</p>");

18. after() inserts content after the element: $("#element").after("<p>New Content</p>");

19. before() inserts content before the element: $("#element").before("<p>New Content</p>");

20. empty() removes all child elements in an element: $("#element").empty();

21. remove() removes the element itself and all its child elements: $("#element").remove();