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.

Example

<button id="button1">Click Me!</button>
<p id="someId">Something</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $("#button1").click(function()
    {
        $("#someId").html("Something Else");
    });
</script>

Common HTML Methods

Those are just a few common methods to edit HTML elements. Of course, you can always use jQuery's references.