Altering content of title in head fails..

Altering content of title in head fails..

I'm using jQuery to make ajax calls for content, when I click on a link and pull in the new content, I want the <title> in the <head> to change. I thought that since head and body are both siblings in the DOM I could target the <title> in the same way as a <p> or any other element and write a new value in, using replaceWith()  which would then change the text in the tab at the top of the browser but it doesn't seem to work. I even tried adding <title id="title_text"> and targeting #title_text, but it doesn't change that way either.

The original title text in the browser tab does change, but  to the page uri.

  1. After using firebug to see what was going on when using replaceWith(), I saw that replaceWith() was replacing this:
HTML Code: 
<head>
 <title>the original title</title>
 <link href="...">
</head>


With this:
HTML Code: 
<head>
 The new title
 <link href="...">
</head>


  1. Ie:  replaceWith() had replaced the text but also had also entirely removed the <title></title> tag pair , causing the browser to use the default URI string.

A bug in jQuery I think, I wonder what other tag pairs it does this to as well?

However using just raw javascript as in :
document.title = 'New title'
Does work and changes the title.

  1. So, in case anyone needs a work around in a similar situation my working sample code without using jQuery's  replaceWith() became:

Code: 
<html>
<head>
<title>Orig title</title>
<script src="jquery-1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" language="javascript">
 
 $(document).ready(function() {
 $("a#menu_1").click(function () {
 document.title = 'New title';
 });
 });

</script>
</head>
<body>
 <a id="menu_1" href="#">Click to change contents of the title.</a> 
</body>
</html>