Change page title with jQuery

14 October, 2009 (15:15)

I just had a need to change the title of the page with JavaScript, and since I use jQuery I imediatelly wrote this:

$( 'title' ).html ( 'new title' );

and it didn’t work. Ok, how about this:

$( 'title' ).val ( 'new title' );

nope. So after some googling I found out that jQuery just can’t do that. You have to use plain old JavaScript:

document.title = 'new title';

I posted this because I think it’s interesting how one gets to rely on a tool he uses, without even thinking to use the technology on which the tool is build, even if that is clearly the better way to go. Or maybe you just get scared of working with the DOM directly if you use jQuery (or something alike) for some time. Don’t get me wrong, DOM is horrid to work with without some abstraction, but sometimes it works beautifully. But jQuery is working really hard to hide the DOM away from you thus subtly seeding fear into your mind.

it’s no coincidence I always think of Doom when I deal with DOM

dom

Comments

Comment from Mark Kadlec
Time October 26, 2009 at 9:15 pm

I agree, and I keep thinking back to how I coded before being able to check the web or intellisense! Relying on these things have made me soft. :)

Comment from skarab
Time December 16, 2009 at 11:10 pm

… use -> $(document).attr(’title’, ‘new title’);

Comment from Powerhost
Time February 5, 2010 at 9:08 am

To skarab:
Thanks! Works fine.

Comment from Ben Byrne
Time April 5, 2010 at 6:35 pm

Interesting…. $(’title’).html() appears to work fine in Webkit-based browsers (it’s also the first thing I tried), but throws an error in IE. Skarab’s approach works fine everywhere, but the only advantage I see of using it over just document.title is that it keeps the code more jquery-esque.

Comment from gwplpypoij
Time April 23, 2010 at 5:27 am

UyK1Gc yohfmpwtuxsd, [url=http://qkyqxnamnsmp.com/]qkyqxnamnsmp[/url], [link=http://wuxyesmojzrg.com/]wuxyesmojzrg[/link], http://vzotbjyvjulc.com/

Comment from Daniel Miguel
Time May 8, 2010 at 2:55 am

Man, I always think of DOOM too… hahah

I thought that document.title was the only solution, but skarah showed another way!

@skarab : Thanks for sharing this information!

Greetings from Brazil

Comment from Kory
Time August 4, 2010 at 9:15 pm

How do search engines index pages with dynamically swapped titles?!?

Comment from zem
Time August 8, 2010 at 7:03 am

@Kory: same way they index pages with dynamically swapped content – they don’t run scripts

Comment from Sérgio Laranjeira
Time August 27, 2010 at 6:54 pm

Even easier, with Jquery

$(”title”).text(”New Title”);

Comment from Digitz
Time October 30, 2010 at 11:49 am

$(”title”).text(”New Title”); will NOT WORK in IE, everywhere else is fine.

for IE, you have to use document.title

Comment from Albert
Time February 14, 2011 at 7:51 am

Hi,

This works fine in all browser…

$(document).attr(”title”, “New Title”);

Works in IE too

Comment from clint carlson
Time November 17, 2011 at 8:57 pm

Anyone have a brilliant way to do the same thing with meta tags?

Comment from Yang
Time December 14, 2011 at 7:52 am

$(document).attr(”title”, “New Title”);

it is dynamically changed in page title but for SEO , it can not get it because when looking into view source there is still no change. anybody know ?

thanks

Write a comment