In this post I will show how to dynamically change document's title using JavaScript and jQuery. Browsing the web (and StackOverflow) I saw a lot of posts that say you can't do it using jQuery. Actually, there is a jQuery syntax that is basically a wrapper for javascript code (see below).
Note: just to clarify, by document title we mean the text that is displayed in the browser window or a tab.
The best way to change the document title is to use native javascript api document.title
.
document.title = "New text set by JavasSript";
The equivalent jQuery code of js code above.
$(document).prop('title', 'New text set by jQuery');
Example
Let's say we need to change the tab title text when a user clicks on a button. Here is a jQuery code to do just that:
<html> <head> <title>Initial page title</title> <script src="path-to/jquery.js"></script> <script> $(document).ready(function(){ $('#clickme').click(function(){ document.title = $(this).val(); // jQuery syntax alternative // $("title").text( $(this).val() ); }); }); </script> </head> <body> <input type="button" id="clickme" name="clickme" value="Click me!" /> </body> </html>
To conclude, you are better off using document.title
, because it is cross-browser and has performs better.
Alternative jQuery syntax has been tested in all major browsers.