How to dynamically change the title of web page using JavaScript ?
Given a web page containing the page title and the task is to change the title of a web page dynamically using JavaScript.
Method 1: Using document.title property: The document.title property is used to set or return the current title of the document. The title of the page can be changed by assigning the new title as a string to this property. This will change the title of the website to the preferred title.
Syntax:
newPageTitle = 'The title has changed!' ; document.title = newPageTitle; |
Example:
<!DOCTYPE html> < html > < head > < title > How to dynamically change a web page’s title using JavaScript ? </ title > </ head > < body > < h1 style = "color: green" > GeeksforGeeks </ h1 > < b > How to dynamically change a web page’s title using JavaScript ? </ b > < p > Click on the button to change the page title to: "The title has changed!" </ p > < button onclick = "changePageTitle()" > Change Page Title </ button > < script type = "text/javascript" > function changePageTitle() { newPageTitle = 'The title has changed!'; document.title = newPageTitle; } </ script > </ body > </ html > |
Output:
- Before clicking the button:
- After clicking the button:
Method 2: Using querySelector() Method: The document.querySelector() method is used to select elements in the document. The title element can be selected by specifying the title element in the selector as a parameter. This will return the current title element of the page.
The textContent property of an element returns the text content of a specific node. The title of the page can be changed by assigning the required new title as a string to the textContent property. This will change the title of the website to the preferred title.
Syntax:
newPageTitle = 'The title has changed!' ; document.querySelector( 'title' ).textContent = newPageTitle; |
Example:
<!DOCTYPE html> < html > < head > < title > How to dynamically change a web page’s title using JavaScript ? </ title > </ head > < body > < h1 style = "color: green" > GeeksforGeeks </ h1 > < b > How to dynamically change a web page’s title using JavaScript ? </ b > < p > Click on the button to change the page title to: "The title has changed!" </ p > < button onclick = "changePageTitle()" > Change Page Title </ button > < script type = "text/javascript" > function changePageTitle() { newPageTitle = 'The title has changed!'; document.querySelector('title').textContent = newPageTitle; } </ script > </ body > </ html > |
Output:
- Before clicking the button:
- After clicking the button: