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!
