How to change an element’s title attribute using jQuery

by

Before we write any code, let’s discuss the difference between attributes and properties. Attributes are the settings you apply to elements in your HTML markup; the browser then parses the markup and creates DOM objects of various types that contain properties initialized with the values of the attributes. On DOM objects, such as a simple HTMLElement, you almost always want to be working with its properties, not its attributes collection.

The current best practice is to avoid working with attributes unless they are custom or there is no equivalent property to supplement it. Since title does indeed exist as a read/write property on many HTMLElements, we should take advantage of it.

You can read more about the difference between attributes and properties here or here.

With this in mind, let’s manipulate that title…

Get or Set an element’s title property without jQuery

Since title is a public property, you can set it on any DOM element that supports it with plain JavaScript:

document.getElementById('yourElementId').title="your new title";

Retrieval is almost identical; nothing special here:

var elementTitle = document.getElementById('yourElementId').title;

This will be the fastest way of changing the title if you’re an optimization nut, but since you wanted jQuery involved:

Get or Set an element’s title property with jQuery (v1.6+)

jQuery introduced a new method in v1.6 to get and set properties. To set the title property on an element, use:

$('#yourElementId').prop('title', 'your new title');

If you’d like to retrieve the title, omit the second parameter and capture the return value:

var elementTitle = $('#yourElementId').prop('title');

Check out the prop() API documentation for jQuery.

If you really don’t want to use properties, or you’re using a version of jQuery prior to v1.6, then you should read on:

Get or Set an element’s title attribute with jQuery (versions <1.6)

You can change the title attribute with the following code:

$('#yourElementId').attr('title', 'your new title');

Or retrieve it with:

var elementTitle = $('#yourElementId').attr('title');

Check out the attr() API documentation for jQuery.

More Related Contents:

  1. Prevent users from submitting a form by hitting Enter
  2. Using JQuery – preventing form from submitting
  3. jQuery: how to get which button was clicked upon form submission?
  4. Clear form fields with jQuery
  5. jQuery .val() vs .attr(“value”)
  6. Get checkbox value in jQuery
  7. How to limit the number of selected checkboxes?
  8. jQuery: serialize() form and other parameters
  9. validating multiple textbox having same name with jquery validator validates only first input
  10. How to send image to PHP file using Ajax?
  11. Submit form with Enter key without submit button? [duplicate]
  12. How to add additional fields to form before submit?
  13. jQuery attribute name contains
  14. jQuery’s .on() method combined with the submit event
  15. How to use jQuery to add form elements dynamically
  16. Is there a way to clone form field values in jQuery or javascript?
  17. Jquery toggle event is messing with checkbox value
  18. Retrieving HTTP status code from loaded iframe with Javascript
  19. How to make Chrome remember password for an AJAX form?
  20. Disable scrolling when changing focus form elements ipad web app
  21. Fancybox2 – different content for tooltip and image title, both from title attribute?
  22. Ajax Form submit with preventDefault
  23. HTML5 textarea placeholder not appearing
  24. HTML5 validation before ajax submit
  25. jquery disable submit button on form submission
  26. jQuery html attribute not working in IE
  27. Force a checkbox to always submit, even when unchecked
  28. submit form does not stop in jquery ajax call
  29. jQuery detect click on disabled submit button
  30. How do I select the parent form based on which submit button is clicked?

Leave a Comment