What is innerHTML in Javascript ?
The innerHTML is a property used to write dynamic html content on the html document.
The innerHTML property is used in two different ways
1. To set the HTML content of an element.
2. To return the HTML content of an element.
What is the use of innerHTML property ?
It is used to generate the dynamic html content in various HTML forms such as registration forms, forums etc.
Javascript online tutorial !!!
Click to Learn More about – Javascript online learning
Syntax 1 :
This returns/gets the innerHTML Property.
Object.innerHTML
Syntax 2 :
This sets the innerHTML property to some value.
Object.innerHTML = value;
Example :
Here innerHTML property gets the actual value of P1,P2,P3 and modifies its style property.
<!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(){
var x = document.getElementById("p1").innerHTML;
document.getElementById("p1").innerHTML = x;
document.getElementById("p1").style.color = "green";
}
function changeContentP2(){
var x = document.getElementById("p2").innerHTML;
document.getElementById("p2").innerHTML = x;
document.getElementById("p2").style.color = "red";
}
function changeContentP3(){
var x = document.getElementById("p3").innerHTML;
document.getElementById("p3").innerHTML = x;
document.getElementById("p3").style.color = "blue";
}
</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()">Green</button> Changing P1 color to Green<br/><br/>
<button class="b2" onclick="changeContentP2()">Red</button> Changing P2 color to Red<br/><br/>
<button class="b3" onclick="changeContentP3()">Blue</button> Changing P3 color to Blue<br/><br/>
<div>
</body>
</html>
Output :
1. Before applying innerHTML property
2. After applying innerHTML property
Example :
Here innerHTML 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").innerHTML = "This is an Computer Science Educational website.";
}
function changeContentP2(){
document.getElementById("p2").innerHTML = "This is an Computer Science Educational website.";
}
function changeContentP3(){
document.getElementById("p3").innerHTML = "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> Changing P1 text<br/><br/>
<button class="b2" onclick="changeContentP2()">P2 Change Text</button> Changing P2 text<br/><br/>
<button class="b3" onclick="changeContentP3()">P3 Change Text</button> Changing P3 text<br/><br/>
<div>
</body>
</html>
Output :
1. Before applying innerHTML property
2. After applying innerHTML property
