What is innerText in Javascript ?
The innerText is a property used to write dynamic text content on the html document.
This is not HTML text, Its just normal text.
The innerText property is used in two different ways
1. To set the Text content of an element.
2. To return the Text content of an element.
What is the use of innerText property ?
It is used to generate the dynamic text content in various HTML forms such as registration forms, forums etc.
What are the drawbacks for innerText ?
innerText will not return the text of elements that are hidden with CSS
Basics of javascript for beginners !!!
Click to Learn More about – Javascript online learning
Syntax 1 :
This returns/gets the node content.
node.innerText
Syntax 2 :
This sets the text content of a node:
node.innerText = value;
Example 1 :
Here innerText property gets the actual value of P1,P2,P3 and alerts in the HTML page.
<!DOCTYPE html>
<html>
<head>
<title>Our title</title>
<style>
#dId-1{
width: 30%;
height: 30%;
text-align:center;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 20px;
}
#dId-2{
width: 30%;
height: 30%;
margin: 10px;
border: 2px solid green;
padding: 20px;
font-size: 20px;
}
.b1, .b2, .b3, .b4, .b5, .s1, .s2, .s3, .s4, .s5{
width:200px;
height:30px;
font-size: 20px;
}
</style>
<script>
function changeContentP1(){
alert(document.getElementById("p1").innerText);
}
function changeContentP2(){
alert(document.getElementById("p2").innerText);
}
function changeContentP3(){
alert(document.getElementById("p3").innerText);
}
</script>
</head>
<body>
<div id="dId-1">
<p id="p1">This is Paragraph1 P1</p>
<p id="p2">This is Paragraph2 P2</p>
<p id="p3">This is Paragraph3 P3</p>
</div>
<div id="dId-2">
<button class="b1" onclick="changeContentP1()">P1 Text</button> Get P1 text<br/><br/>
<button class="b2" onclick="changeContentP2()">P2 Text</button> Get P2 text<br/><br/>
<button class="b3" onclick="changeContentP3()">P3 Text</button> Get P3 text<br/><br/>
<div>
</body>
</html>
Output :
1. Before applying innerText property
2. After applying innerText property
Example 2 :
Here innerText property sets a new content for P1,P2,P3 (“This is an Computer Science Educational website.”)
<!DOCTYPE html>
<html>
<head>
<title>Our title</title>
<style>
#dId-1{
width: 30%;
height: 30%;
text-align:center;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 20px;
}
#dId-2{
width: 30%;
height: 30%;
margin: 10px;
border: 2px solid green;
padding: 20px;
font-size: 20px;
}
.b1, .b2, .b3, .b4, .b5, .s1, .s2, .s3, .s4, .s5{
width:200px;
height:30px;
font-size: 20px;
}
</style>
<script>
function changeContentP1(){
document.getElementById("p1").innerText = "This is an Computer Science Educational website.";
}
function changeContentP2(){
document.getElementById("p2").innerText = "This is an Computer Science Educational website.";
}
function changeContentP3(){
document.getElementById("p3").innerText = "This is an Computer Science Educational website.";
}
</script>
</head>
<body>
<div id="dId-1">
<p id="p1">This is Paragraph1 P1</p>
<p id="p2">This is Paragraph2 P2</p>
<p id="p3">This is Paragraph3 P3</p>
</div>
<div id="dId-2">
<button class="b1" onclick="changeContentP1()">P1 Change Text</button> Change P1 text<br/><br/>
<button class="b2" onclick="changeContentP2()">P2 Change Text</button> Change P2 text<br/><br/>
<button class="b3" onclick="changeContentP3()">P3 Change Text</button> Change P3 text<br/><br/>
<div>
</body>
</html>
Output :
1. Before applying innerText property
2. After applying innerText property
