Modifying the Existing DOM Elements

Explore different jQuery methods for modifying existing DOM elements.

We'll cover the following

jQuery provides us with several useful methods to manipulate and alter DOM elements. These methods overwrite and update the objects on which they are called, making the process more intuitive and direct.

The manipulation methods allow us to perform many tasks on different elements, such as:

  • Adding or removing classes
  • Changing style properties
  • Changing text, HTML, and input values
  • Changing attribute values

We will go through some important manipulation methods below. You can find the complete documentation of all jQuery manipulation methods here.

Adding or removing classes

The jQuery addClass() method takes the class name as an argument and adds the specified class to the given element. Similarly, the removeClass() method also takes the class name as an argument but removes the specified class from the given element.

In the example web page below, we have a paragraph element with class italicText. We also have a button element with the text “Change Class”. When the button element is clicked, we remove the italicText class using the removeClass() method (line 3) and add the boldText class using the addClass() method (line 4). Both italicText and boldText classes are defined in the CSS for the web page.

Run the code below. In the web page output, click on the button that says Change Class. Observe how the paragraph text changes from italic to bold to due change in class.

Changing style properties


jQuery provides us with the css() method to directly change the styling properties of elements. The method takes two arguments: propertyName and value. The propertyName argument specifies which property needs to be updated. The value argument specifies the new value of that property.


Check out the web page below; we change the color of the paragraph element on the mouse hover event. In the event handler function, we change the text color to red on mouseenter (line 3). Similarly, we change the text color back to black on mouseleave (line 6). Both these tasks use the css() method.


Changing text, HTML, and input values


jQuery provides us with the text(), html() and val() methods to update the respective element text, HTML and input values.


    

  • The text() method takes the new text as an argument for a given element.
    • 

  • The html() method takes the new HTML as an argument for a given element.
    • 

  • The val() method takes the new value as an argument for a given input element.
    • 



For example, we have three elements in the web page below that we want to manipulate: span, p, and input. We also have three buttons with texts: “Change span text,” “Change paragraph HTML,” and “Change input value.”


    

  • 

    In the “Change span text” button click event handler, we change the text of the span element using the text() method (line 3).
    

    • 

  • 

    In the “Change paragraph HTML” button click event handler, we change the HTML and insert a span within the paragraph element using the html() method (line 6).
    

    • 

  • 

    In the “Change input value” button click event handler, we change the value of the input element using the val() method (line 9).
    

    • 



Changing attribute values


jQuery provides us with the attr() method to change the attribute values of elements. The method takes attributeName and value arguments. The attributeName argument specifies which attribute needs to be updated. The value argument specifies the new value of that attribute.


In the example web page below, we have a hyperlink element with the text “Bing” and href set to http://www.bing.com. We also have a button with the text “Change website.” When this button is clicked, we change the href attribute to http://www.educative.io (line 3) and the text to “Educative” (line 4) using the attr() and text() methods respectively.