document.title property to manage title tag in JavaScript

Title tag of the web page is one of the important tag of a html page. The keywords used inside this title tag has high relevant for search engine ranking of a site. You can read on title tag keywords at search engine friendly page here.

You can read html title tag here.

We will discuss here how to manage the title tag by using the document property in JavaScript.

The basic syntax to manage content of the title tag is here.


document.title=" this is my new title ";

You can see how the tag is changed. Now let us try one demo. Type some text here and click the button.

Demo of managing title of a page

Ok now the source code for the above demos , first the top one ( by pressing the button )


<html>
<head>
<title></title>
<script type="text/javascript">
function change_title(){
document.title=document.getElementById("t1").value;
}
</script>
</head>
<body>

<form name=f1 method=post>
<input type=text name=t1 id="t1">
<input type=button onClick='change_title()'; value='Change Title'>
</form>

</body>
</html>

Now the code for second example ( without the submit button by using onkeyup event handler)


<html>
<head>
<title>Original title ends</title>
<script type="text/javascript">
function change_title(keyEvent){
//alert(keyEvent);
keyEvent = (keyEvent) ? keyEvent: window.event;
input = (keyEvent.target) ? keyEvent.target :
keyEvent.srcElement;

if(keyEvent.type=="keyup"){

if(input.value){
document.title=document.getElementById("t1").value;
}
}

</script>
</head>
<body>

<form name=f1 method=post>
<input type=text name=t1 id="t1" onkeyup='change_title(event)';>

</form>

</body>
</html>

document.title of a page by JavaScript