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

How to get the title of an HTML page ?

Last Updated : 20 Jun, 2023

In this article, we will see how to get the title of HTML page using JavaScript. There is a number of ways to do this but here we discuss a few of the most preferred methods.

Example 1: This example gets the title of the document by using document.title property.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        GeeksforGeeks Page Title
    </title>
</head>

<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h3>
        Click on button to get the 
        title of HTML document
    </h3>
    
    <button onClick="GFG_Fun()">
        Click Here
    </button>
    
    <p id="GFG2"></p>
    
    <script>
        let elm = document.getElementById('GFG2');

        function GFG_Fun() {
            elm.innerHTML = document.title;
        }
    </script>
</body>

</html>

Output:

Example 2: This example gets the title of document by selecting the title by tag name and then taking the element at index 0 using document.getElementsByTagName() method.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        GeeksforGeeks Page Title
    </title>
</head>

<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h3>
        Click on button to get the 
        title of HTML document
    </h3>
    
    <button onClick="GFG_Fun()">
        Click Here
    </button>
    
    <p id="GFG"></p>
    
    <script>
        let elm = document.getElementById('GFG');

        function GFG_Fun() {
            let title = document
                .getElementsByTagName("title")[0];

            elm.innerHTML = title.innerHTML;
        }
    </script>
</body>

</html>

Output:

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

P

PranchalKatiyar

Improve

Article Tags :

Similar Reads

How to get title of current HTML page using jQuery ?

Suppose you have given an HTML page and the task is to get the title of an HTML page with the help of only jQuery. There are two approaches that are discussed below: Approach 1: The $('title') jQuery selector is used to select the title element of the document and we can use text() method on the sel

How to define the root of an HTML document ?

The <html> tag in HTML is used to define the root of HTML and XHTML documents. The <html> tag tells the browser that it is an HTML document. It is the second outer container for everything that appears in an HTML document followed by the <!DOCTYPE> tag. The <html> tag require

How to Change the WooCommerce Shop Page Title?

By default, WooCommerce sets the shop page title as â€œShop.â€ However, customizing the title can enhance your brand value and make the page more engaging. WooCommerce is the most widely used eCommerce platform that is extremely adaptable, cost-effective, and simple to use, even for beginners. However,

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

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

How to change the title of a framed document ?

In this article, we will learn about the way to change the Title of a Framed Document.HTML Frames and Frameset: The use of Frames is to divide the window of a browser into multiple sections in which each section is loaded separately. These are used to specify which HTML document will be loaded in th

How to Hide Post and Page Titles in WordPress?

Hiding posts and page titles in WordPress can be useful for creating cleaner, more professional-looking web pages. Whether you want to use a custom design or just prefer a minimalist look, this guide will show you how to hide titles without affecting your content. This process is straightforward and

How to get the outer html of an element using jQuery ?

Sometimes, there is a need to get the entire HTML element by its id and not merely its contents, for doing so, we shall use the HTML DOM outerHTML Property to get the outer HTML of HTML element. Syntax: document.getElementById("your-element-id").outerHTML) You can use a variable and initialize it to

How to specify the main content of a document in HTML5 ?

The <article> tag is one of the new sectioning element in HTML5. The HTML article tag is used to represent an article. More specifically, the content within the <article> tag is independent of the other content of the site (even though it can be related). In other words, the article elem

How to Change Page Titles When Using Vue-Router ?

When using Vue Router in a Vue.js application, you may want to dynamically change the page title based on the currently active route. This is commonly done for better user experience and SEO. Vue Router provides a way to accomplish this by updating the document title in the browser dynamically. Belo

How to get the source code of a web page using PHP ?

Given a webpage, for which we need to find its source code using PHP. For this, we are going to use the PHP htmlspecialchars() function which converts any predefined characters to their subsequent HTML entities.Example 1: Suppose we take a sample website that looks like the below image, let us see w