Changing HTML attributes via jQuery (attr, prop, removeAttr)

This article has covered some of the most commonly used jQuery methods for changing the attributes and content of HTML elements.

Reading and changing attributes (attr, prop)

Here is an example of reading an attribute value using the attr method . To read the value, you must pass the name of the attribute as a parameter. For example, let's try to get the value of the attr attribute from a text input field:

<input type="text" value="Tiger, lion and wolf" id="wolf">
<script>
   var a = $('#wolf').attr('value'); // Gets the value of the 'value' attribute
   console.log( a ); // will output 'Tiger, lion and wolf'
</script>

To set the value of an attribute, we use the same attr method , but pass it a second parameter that will contain the new value:

<input type="text" value="Tiger, lion and wolf" id="wolf">
<script>
   $('#wolf').attr('value', 'Cheese!');
</script>

After executing this code, the text field with id equal to "wolf" will have its value attribute changed from "Tiger, lion and wolf" to "Cheese!". You can use the special val method to work with the " value" attribute . If you don't pass any parameter to it, it will return the value of the element's value attribute. And if you pass a parameter, it will be set as a new value. Let's demonstrate this by modifying the previous examples. Let's read the value first:

<input type="text" value="Tiger, lion and wolf" id="wolf">
<script>
   var a = $('#wolf').val(); // Gets the value of the 'value' attribute
   console.log( a ); // will print 'Tiger, lion and wolf'
</script>

Now let's set the value:

<input type="text" value="Tiger, lion and wolf" id="wolf">
<script>
   $('#wolf').val('Cheese!');
</script>

Unfortunately, the attr method is not omnipotent. For example, it cannot determine if a checkbox is "checked" or if a form field is "disabled". To do this, you need to use the " prop " method. It works exactly like attr , but when setting the second parameter, you must use the values ​​"true" or "false" (it returns them if the second parameter is not set). Let's demonstrate this with a checkbox example:

<input type="checkbox" id="wolf">
<script>
   var a = $('#wolf').prop('checked'); // will return "false" because it's not "checked"
   $('#wolf').prop('checked', true); // change the checkbox state to "checked"
   var a = $('#wolf').prop('checked'); // will return "true" because "checked"
</script>

Now let's see the deactivated "disabled" form fields (you can't type anything in them):

<input type="text" id="wolf">
<script>
   var a = $('#wolf').prop('disabled'); // will return "false"
   $('#wolf').prop('disabled', true); // change state to "disabled"
   var a = $('#wolf').prop('disabled'); // will return "true"
</script>

Removing attributes (removeAttr method)

Sometimes it becomes necessary to completely remove an attribute of a tag. Let's try to take the example from the previous paragraph and remove the "value" attribute completely. To do this, we use the removeAttr method , which removes the attributes (value and name) of the elements. Only the name of the attribute needs to be passed to this method. The code will look like this:

<input type="text" value="Tiger, lion and wolf" id="wolf">
<script>
   $('#wolf').removeAttr('value');
</script>

After executing this JS code, the HTML code of the text field will look like this:

<input type="text" id="wolf">