JavaScript: How to Programmatically Update Page Title

Updated: March 23, 2023 By: Khue Post a comment

This concise, example-based article will show you how to programmatically update the title of a webpage by using pure JavaScript.


Before you start coding, let’s look at some possible (and elegant) approaches.

Using the document.title property

You can use this property to easily set or return the current title of the document. The title of the page can be changed by assigning a new title as a string to this property:

document.title = "Welcome to Sling Academy";

Using the <title> tag

You can use the document.querySelector() or the document.getElementByTagName() method to select the title element. After that, you can change the page title dynamically by setting the textContent property to a string, as shown below:

const title = document.querySelector("title");
title.textContent = "Hi there!";

These are just brief theories. Let’s see how we put them into practice in the following complete example.

Complete Example


In this example, we are going to make a sample webpage that contains a text input and a button. When the button gets pressed, the page title will be updated with the value of the text input (we will also display the new title with a <h1> tag).

Here’s how it works in action:

The Code

Create a new HTML file and add the code below to it:

    <title>Old title</title>

    <form onsubmit="changePageTitle(event)" style="margin-top: 30px">
        Enter new title: <input id="iText" type="text">
        <input type="submit" value="Submit">
    <h1 id="h1"></h1>
        const changePageTitle = (event) => {
            // Prevent the form from reloading the page
            // Get the input value
            const newTitle = document.getElementById("iText").value;

            // Set the document title and h1 element
            document.title = newTitle;

            // Set the h1 element
            const h1 = document.getElementById("h1");
            h1.innerHTML = `You have changed the title to: ${newTitle}`;


Save the file then open it with your favorite web browser. Enjoy!