Skip to Content

Advertisement

You (Level 0)
0% Complete
Last Badge Earned
None

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

  • 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.

I've attached my favorite JavaScript and jQuery book. I would encourage you to read it as well.

Your code will execute in this window.



Let's explore some more tutorials or topics!

Next Tutorial Previous Tutorial

Advertisement

If you enjoyed this resource, support me by sharing this page with others.

Comment on

Show Comments

No comments yet... Be the first!



Advertisement