HTML DOM innerText Property


The HTML DOM innerText property returns and allow us to modify inner text content of an HTML element.

Syntax

Following is the syntax −

1. Returning inner text

object.innerText

2. Setting inner text

object.innerText=”text”

Example

Let us see an example of innerText property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
   }
   .box{
      background-color:#347924;
      width:100px;
      padding:10px;
      text-align:center;
      font-weight:bold;
      font-size:1.5rem;
      color:white;
      margin:1rem auto;
   }
</style>
</head>
<body>
<h1>innerText property Example</h1>
<div class="box">
</div>
<button onclick="writeHi()">Write Hi</button>
<button onclick="writeHello()">Write Hello</button>
<script>
   function writeHi() {
      var outerBox = document.querySelector('.box');
      outerBox.innerText ='HI';
   }
   function writeHello() {
      var outerBox = document.querySelector('.box');
      outerBox.innerText ='HELLO';
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Write Hi/Write Hello” button to change inner text of green box.

raja
Published on 16-Jul-2019 15:50:18
Advertisements