This blog will state the differences between the prop() and attr() methods in JavaScript.
Core Differences Between prop() and attr() in JavaScript
Following are the differences between prop() and attr() methods in JavaScript:
| prop() | attr() |
|---|---|
| The prop() method can change the value of the element. | The attr() method, on the other hand, does not affect the element’s value. |
| It shows the current value of the HTML code. | It shows the default set value. |
| This method is used as a syntax of properties to change the value. | This method is used for the attribute. |
Check out the given example to get practically get to know about the prop() and attr() differences.
Example: prop() and attr() Upon the Input Text Field
In this example, we will apply the “attr()” and “prop()” methods upon the input text fields separately.
Let’s see how both methods work:
<h3>attr() method will not change the text field value</h3>
<button id="btnOne">Click Me</button>
<p id="attr" style="height: 20px;width: auto"></p>
<h3>prop() method will change the text field value</h3>
<button id="btnTwo">Click Me</button>
<p id="prop" style="height: 20px;width: auto"></p>
</div>
In the above HTML lines of code:
- Include the “<div>” element and perform the stated styling.
- Also, include a heading.
- The added “<input>” is an HTML element that takes a value from the user, and “type” corresponds to the attribute referring to the input data should be text.
- The “id” attribute is specified to access the text field. Also, set the stated default value with the “value” attribute.
- Also, include the button to trigger the functionalities.
- After that, include the “<p>” tag to accumulate the outcome corresponding to the “attr()” method.
- Likewise, replicate the included functionalities for displaying the outcome of the “prop()” method via the “input text” field.
Now, let’s move on to the JavaScript code:
</script>
<script>
$(document).ready(function(){
$('#btnOne').click(function() {
$("#attr").text($('#inputText').attr('value') + " - Default Value ");
});
});
$(document).ready(function(){
$('#btnTwo').click(function() {
$("#prop").text($('#textInput').prop('value') + " - Current value");
});
});
In the above code block, apply the following steps:
- Include the jQuery library within the “<script>” tag to apply its methods via the “src” attribute.
- After that, apply the “ready()” method, which will execute the stated function as soon as the Document Object Model(DOM) has been loaded.
- Now, access the created button such that the stated function executes upon the button click via the “click()” method.
- In the function definition, access the input text field by its “id” and return its text content via the “text()” method.
- Also, apply the “attr()” method to access the “value” attribute of the fetched input text field.
- In this case, the value will remain the same irrespective of the user-defined text.
- Likewise, repeat the discussed procedure for the “prop()” method, as applied to the “attr()” method.
- In this case, the user-defined text in the text field will be updated with the set value and appended to the fetched “<p>” element by its id.
Output
The output shows that the “attr()” method doesn’t change the original state, whereas the “prop()” method displays the updated value.
Conclusion
The “attr()” method does not change the element’s value attribute. On the other hand, the “prop()” method updates it. Both methods have their pros and cons depending on the user’s requirements. This blog stated the differences between the attr() and prop() methods with the help of an example.
