Sling Academy
Home/JavaScript/JavaScript: How to Programmatically Update Page Title

JavaScript: How to Programmatically Update Page Title

Last updated: March 23, 2023

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

Overview

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

Preview

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:

<html>
<head>
    <title>Old title</title>
</head>

<body>
    <form onsubmit="changePageTitle(event)" style="margin-top: 30px">
        Enter new title: <input id="iText" type="text">
        <input type="submit" value="Submit">
    </form>
    <h1 id="h1"></h1>
    <script>
        const changePageTitle = (event) => {
            // Prevent the form from reloading the page
            event.preventDefault();
            // 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}`;
        }
    </script>
</body>

</html>

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

Next Article: JavaScript: Checking if a Div element is visible

Previous Article: JavaScript: Programmatically Disable/Enable a Text Input

Series: JavaScript: Document Object Model Tutorials

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration