This post discusses all possible methods to modify/change the src attribute of the HTML element in jQuery.
How to Change the “src” Attribute of the HTML “img” Element in jQuery?
To change the “src” attribute of the HTML “img” element use the jQuery pre-defined “attr()” method or the “prop()” method. Both the specified methods are straightforward and easy to use. This section demonstrates the practical implementation of both these methods.
Let’s start with the “attr()” method.
Before moving on to the practical implementation of the stated methods, first have a look at the sample image elements used in this guide.
HTML Code
In the above HTML code:
- The “<img>” tag adds the image, having the specified “src”, id, height, width, and the border attribute.
- The “<button>” tag inserts a button with the stated content.
Note: The stated HTML code will be utilized in both the defined methods.
Method 1: Using jQuery “attr()” Method
The “attr()” method sets, modifies and retrieves the attributes as well as the values of the selected HTML elements. In this method, it is applied to modify the “src” attribute value of the added image element.
Syntax
The above syntax shows that the “attr()” method works on two parameters:
- attribute_name: It denotes the attribute name of the selected element.
- new_value: It specifies the attribute value that needs to be set/modified.
Let’s use the above-defined syntax practically.
jQuery Code
<script>
$(document).ready(function() {
$("button").click(function() {
$("#img").attr("src", "file:/D:/newImage.png");
});
});
</script>
In the above lines of code:
- The first “<script>” tag uses the “src” attribute to specify the jQuery library CDN from its official website.
- The next “<script>” tag defines the main script section that first utilizes the “ready()” method for executing the given function when the current HTML document gets ready.
- After that, the “click()” method invokes the functionality of the stated function upon clicking on the given “button” selector.
- Lastly, the “attr()” method modifies the “src” attribute of the accessed “img” selector.
Output
The output changes the image upon button click which confirms that the “src” attribute of the existing “img” element has been changed successfully.
Method 2: Using jQuery “prop()” Method
The “prop()” is another useful method that can be used as the “attr()” method to set, modify and return the properties and values of the selected HTML element. Here in this scenario, it is used to change the “src” attribute of an image(<img>) element.
Syntax
The user can specify the desired “attribute_name” at the “property_name” parameter.
jQuery Code
<script>
$(document).ready(function() {
$("button").click(function() {
$("#img").prop("src", "file:/D:/newImage.png");
});
});
</script>
This time the “prop()” method is applied with the accessed “img” selector to change its src attribute value.
Output
The above output is identical to the “attr()” method i.e. changes the “src” attribute of a given image successfully.
Conclusion
jQuery offers the “attr()” and the “prop()” methods to change the “src” attribute of the HTML “img” element. Both these methods work on two parameters “attribute_name”, and the “new_value” to perform this task. The usage of both these methods is the same however the “prop()” method can also be used to change the property’s value of an element. This post illustrated all the possible methods to change the src attribute of the HTML element in jQuery.
