Home » Tutorials » JavaScript » jQuery With HTML

jQuery With HTML

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.



Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "jQuery With HTML". After Hours Programming. Accessed on March 18, 2024. https://www.afterhoursprogramming.com/tutorial/javascript/jquery-with-html/.

  • Stewart, Suzy. "jQuery With HTML". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/javascript/jquery-with-html/. Accessed 18 March, 2024.

  • Stewart, Suzy. jQuery With HTML. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/javascript/jquery-with-html/.



Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.