jQuery .attr(): Read and Set HTML Attributes

jQuery Reference

.attr() reads or sets HTML attributes. With one attribute-name argument, it reads the first matched element; with a name and value, it sets the attribute on every matched element.

Syntax and behavior

const title = $("#link").attr("title");
$("#link").attr("title", "Navigation hint");
$("#link").attr({ title: "Navigation hint", "data-role": "help" });

Reading an absent attribute or an empty selection returns undefined. Values are usually strings, and a getter does not return every matched element’s value. Pass an object to set several attributes at once. A callback can calculate a new value from each element’s index and previous attribute value. A getter returns the attribute value; a setter returns the jQuery object.

The official jQuery .attr() documentation describes additional call signatures and argument types.

Complete runnable example

Save the following code as a UTF-8 example.html file and open it in a browser. It loads the full jQuery 4.0.0 build from an external URL, so an internet connection is required. The $(function () { ... }) callback waits for the document to be ready before running the example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery attr example</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<label for="name">Name</label>
<input id="name" type="text" value="Initial name" title="Before">
<input id="check" type="checkbox" checked="">
<label for="check">Agree</label>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      const before = $("#name").attr("title");
      $("#name").attr({ title: "Enter your name", placeholder: "Example: Alex Kim" });
      $("#check").prop("checked", false);
      $("#output").text("title: " + before + " → " + $("#name").attr("title") +
        " / checked attribute: " + JSON.stringify($("#check").attr("checked")) +
        " / Current state: " + $("#check").prop("checked"));
    });
  </script>
</body>
</html>

Expected result

The title changes from Before to Enter your name, and the checkbox is unchecked. In jQuery 4.0.0, reading checked="" yields an empty string while the current checked property is false. The name field still has its initial value, so its placeholder appears only after that value is cleared.

Important details and troubleshooting

Distinguish HTML attributes from current DOM properties. Read checked state with .prop("checked") and current input values with .val(). .attr("value") is not the general way to read what a user has typed.
In jQuery 4.0, .attr(name, false) removes non-ARIA attributes. For an ARIA attribute, false becomes the string "false"; use .removeAttr() or null to remove the attribute itself.
Use .css() for CSS properties. Replacing the entire class attribute with .attr() overwrites existing classes, so use class methods when changing only particular names.

Compare the behavior with .removeAttr() attribute deletion, .css() and computed styles, .val() and current input values.

jQuery Reference

jQuery :contains(): Match Elements by Text Content

Explore case-sensitive substring matching, descendant text, and a safer way to handle dynamic search strings without constructing selectors.

jQuery .add(): Combine Element Selections

Combine selections without changing the original collection, and distinguish selecting elements from inserting them into the document.

jQuery .append(): Insert Content as the Last Child

Add content at the end of an element, compare insertion with moving or cloning nodes, and handle user input as plain text.

jQuery .addClass(): Add One or More CSS Classes

Add one or more classes while preserving existing names, generate classes with a callback, and check why styling may not change.

jQuery .before(): Insert Content as the Previous Sibling

Insert or move content immediately before a target, and compare before with inside insertion and insertBefore syntax.

jQuery :button Selector: Which Elements Does It Match?

Check how :button treats button elements, ordinary button inputs, and submit or reset inputs, with a working selection example.

jQuery .removeClass(): Remove Specific or All Classes

Remove selected class names or clear all classes, while distinguishing class removal from clearing inline styles.

jQuery .attr(): Read and Set HTML Attributes

Read and set attributes, distinguish them from current field properties, and understand Boolean and ARIA handling in jQuery 4.0.

jQuery .find(): Select Matching Descendants

Search through descendant levels while excluding the container, and compare find with children, filter, and has.

jQuery .after(): Insert Content as the Next Sibling

Insert or move content immediately after a target, and compare after with inside insertion and insertAfter syntax.