In this tutorial, learn how to get the current web HTML page title in javascript.
And also how to update page title with value in javascript.
On the Html page, the Title
tag contains a text content of a complete web page. <title>
tag in HTML contains text content.
Here is a title example in HTML
how to get the Current page title in javascript?
There are several ways to get the current page title in javascript.
First, an easy way is using document.title
.
console.log(document.title)
Second, using dom getElementsByTagName
API
getElementsByTagName('title')
returns array of elements, get the first element.
textContent
property on HTML element returns title of an page.
you can also use innerHTML
to get the title.
textContent
is recommeded one to get title.
var titleElement = document.getElementsByTagName("title")[0];
console.log(titleElement) //<title> Hello World title</title>
console.log(titleElement.textContent) //Hello World title
console.log(titleElement.innerHTML) //Hello World title
- get title using jquery Selector syntax.
First, Select a document using HTML element selector syntax. Filter the DOM elements with a title tag and return the title HTML element Finally, call text() method to get text content.
var titleText = $(html).filter('title').text();
console.log(titleText) //Hello World title
or you can try
$('head > title').text();
How to change the title of the webpage using javascript and jquery
There are multiple ways, we can change the title.
- using document object, change title attribute with new value
document.title = 'New HTML title value';
- Another using getElementsByTagName
First get an element using getElementsByTagName and change title directly
document.getElementsByTagName('title')[0]='New html title value content';
- jquery to change the title
Select an html element and find the title and update title using
text()
method
$(html).find('title').text('new html title value using jquery');