How to get and update the title of the webpage using JavaScript and jQuery?

How to get and update the title of the webpage using JavaScript and jQuery?

This tutorial shows you how to get and update the title of a Current HTML webpage in JavaScript.

What is Page Title in Web Page?

The title of a page is a text description, that is displayed on the browser. It is an important element of a web page. It also helps to distinguish a page from other pages. By writing the correct page title, Users easily find it in organic search engines. The title tag in HTML is used for page titles. In the HTML Page, the title tag contains text content.

Here is an example of a simple HTML page.

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> Hello World title</title>
</head>

<body>
    This is a simple web HTML page
</body>

</html>

<title></title> is an HTML tag used to define the title of a page.

How to get the Current page title in JavaScript?

Multiple ways to get the current page title in javascript.

  • get the title using the document.title

document is a javascript object, that contains functions and properties to manage the DOM tree. DOM is nothing but a tree of HTML nodes, each node represents an HTML element. title is a property of the document object, so document.title returns the title of a page.

console.log(document.title);

Using this approach is easy and fast, and works in all browsers.

  • get the title using getElementsByTagName

First, Select a document using HTML element selector syntax with the getElementsByTagName() method. Filter the DOM elements with a title tag and return the title HTML node Calling textContent on this node returns the text content of the node, Similarly, innerHTML returns the HTML content of the node. In this case, the title is Hello World title.

textContent is recommended to get the title because it is readable for text content, while innerHTML is recommended for HTML content.

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 the title using jQuery Selector syntax.

First, Select a document using HTML element selector syntax with jQuery. Filter the DOM elements with a title tag and return the title HTML element Finally, call the text() method to get text content.

var titleText = $(html).filter("title").text();
console.log(titleText); //Hello World title

In the same way, use jQuery child selector syntax to get the title child selector is used to get the child element of the parent element.

$("head > title").text();

In this example, the head is a parent element, and the title is a child element of the head element.

How to change the webpage title using javascript and jQuery?

Multiple ways to change the title of the webpage.

  • using the document object, change the title attribute with a new value

document.title is an attribute of the document object, so document.title = "New HTML title value" changes the title of a page to New HTML title value.

document.title = "New HTML title value";
  • Another using getElementsByTagName

First, Select a document using HTML element selector syntax with the getElementsByTagName method In this case, document.getElementsByTagName("title")[0] returns the title HTML node this node contains the title value.

Change the title with a new value using assignment syntax.

document.getElementsByTagName("title")[0] = "New HTML title value content";
  • Jquery to change the title

First, Select an HTML element using jQuery selector syntax.

Find the DOM elements with a title tag and return the title HTML element. Update the title using the text() method.

$(html).find("title").text("new html title value using jquery");

Conclusion

In this tutorial, We will see how to get and update the title of a Current HTML webpage in javascript.