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

Last Updated : 24 Sep, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Dynamically changing the title of a webpage using JavaScript refers to updating the content of the `<title>` element in the HTML document without reloading the page. This allows developers to modify the page title based on user interaction or other conditions in real-time.

For changing the page title we have two approaches:

Table of Content

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 use dynamically changes the webpage's title using JavaScript. When the button is clicked, the document.title is updated to "The title has changed!", modifying the page's title instantly.

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 selects elements by targeting the <title> tag. Using textContent, it retrieves or updates the page's title. Assigning a new string to textContent dynamically changes the webpage's title to the desired value. 

Syntax: 

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

Example: In this example, we use JavaScript to dynamically change the webpage's title. When the button is clicked, the title updates to "The title has changed!" by modifying the textContent of the <title> element.

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:


Next Article
How to change style attribute of an element dynamically using JavaScript ?
author
sayantanm19
Improve
Article Tags :

Similar Reads