HTML DOM innerText Property

HTMLWeb DevelopmentFront End Technology

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