Onjsdev

Share


How to Dynamically Change a Web Page's Title with Javascript


By onjsdev

Dec 28th, 2023

Changing a web page's HTML document title dynamically using JavaScript allows you to provide users with updated and relevant information about the page they are viewing. This is particularly useful when working with single-page applications or dynamic content that changes over time.

Here is how to achieve this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="pageTitle">Initial Title</title>
</head>
<body>

<!-- Your page content goes here -->

<script>
       document.title = "This is the new title";
</script>

</body>
</html>

You can also change page title in response to user interactions, AJAX requests, or any other events that trigger the change you desire. Just make sure to include the script on your page, and customize it according to your needs.

Conclusion

You've successfully learned how to dynamically change a web page's title using JavaScript. This technique is valuable for providing users with real-time information about the content they are viewing.

Thank you for reading.