Open In App

How to dynamically change the title of web page using JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

Given a web page containing the page title, the task is to change the title of a web page dynamically using JavaScript. 

The Page title describes the concise description of the web page that is displayed at the top of the browser tab. The <title> tag is used to specify the document’s title, The title which should just be text, is displayed in the pages tab or in the browser’s title bar. the title of each page you visit on a website should be adjusted to reflect its content.

For changing the page title we have two approaches:

Approach 1: Using JavaScript document.title property

This property is used to set or return the current title of the document. The title of the page can be changed by assigning the new title as a string to this property. This will change the title of the website to the preferred title. 

Syntax: 

newPageTitle = 'The title has changed!';
document.title = newPageTitle;

Example: In this example, we are using the above-explained approach.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        How to dynamically change a web
        page’s title using JavaScript ?
    </title>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
 
    <b>
        How to dynamically change a web
        page’s title using JavaScript ?
    </b>
 
    <p>
        Click on the button to change the page
        title to: "The title has changed!"
    </p>
 
    <button onclick="changePageTitle()">
        Change Page Title
    </button>
 
    <script type="text/javascript">
        function changePageTitle() {
            newPageTitle = 'The title has changed!';
            document.title = newPageTitle;
        }
    </script>
</body>
</html>


Output:

Approach 2: Using DOM querySelector() Method

This method is used to select elements in the document. The title element can be selected by specifying the title element in the selector as a parameter. This will return the current title element of the page. The textContent property of an element returns the text content of a specific node. The title of the page can be changed by assigning the required new title as a string to the textContent property. This will change the title of the website to the preferred title. 

Syntax: 

newPageTitle = 'The title has changed!';
document.querySelector('title').textContent = newPageTitle;

Example: In this example, we are using the above approach.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to dynamically change a web
        page’s title using JavaScript ?
    </title>
</head>
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
 
    <b>
        How to dynamically change a web
        page’s title using JavaScript ?
    </b>
 
    <p>
        Click on the button to change the page
        title to: "The title has changed!"
    </p>
 
    <button onclick="changePageTitle()">
        Change Page Title
    </button>
 
    <script type="text/javascript">
        function changePageTitle() {
            newPageTitle = 'The title has changed!';
            document.querySelector('title').textContent
                = newPageTitle;
        }
    </script>
</body>
</html>


Output:



Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads