We haven’t really changed any HTML elements just yet. Well now, we are here. jQuery simplifies about anything you want to do with HTML elements. jQuery’s primary purpose is to modify a web document’s HTML and CSS files, but how do we actually change HTML elements. We can insert new elements, remove elements, or even edit them using jQuery’s selectors that you read about earlier.
Generally when using jQuery with the intent to change the styling of an element, you want to do one of two things: add/remove a class to it or just change one CSS property. I would argue that it is a much better practice to always add or remove class, even if it is just one property, to/from an element. The reason being that classes are easily selected, but CSS properties require more work.
However, you can also use jQuery to modify the content of an element. You can append items before, after, or inside an element. I will show an example of modifying the entire content, but feel free to play around with these selectors and jQuery functions because they truly are a great asset to any web developer.
Common HTML Methods
- addClass() – adds a class to the selected element
- after() – adds content after the selected element
- append() – adds content at the end selected element
- attr() – adds an attribute to the selected element
- before() – adds content at the before the selected element
- html() – sets or gets the contents the selected element
- remove() – removes the selected element
- removeClass() – removes a class of the selected element
- replaceWith() – replaces selected element with new content
Those are just a few common methods to edit HTML elements. Of course, you can always use jQuery’s references.