Change Heading Text in JavaScript

In this tutorial we will learn how to Change Heading Text in JavaScript. HTML DOM Element textContent property can be used for this purpose which sets or returns the text content of HTML element.

Table of Contents

• HTML Code
• JavaScript Code
• getElementById() Method
• textContent property
• Demo
• Video Tutorial
• More JavaScript Tutorials

HTML Code

HTML Code is given below, in this code we have a heading tag and a button tag with onclick event which will execute a JavaScript function to change the text of heading element.

<h1 id="heading">Main Heading</h1>    
<button onclick="changeText()">Change Text</button>       

JavaScript Code

Take a look at the JavaScript code, the HTML Dom textContent property is used with HTML Dom getElementById method.

<script>
function changeText()
{
    var heading = document.getElementById('heading');
    heading.textContent = 'New Text!';
}
</script>

getElementById() Method

getElementById() Method is used to select element with the specified id.

textContent property

JavaScript textContent property is used to set or get the value of the selected HTML element.

In this example it will change the text of the selected heading tag.

Demo

Check Demo

Video Tutorial

Watch video tutorial on Change Heading Text in JavaScript.