Learn JavaScript for Web Development

JavaScript is most versatile languages to code applications for the browser, desktop, phone or tablet. Write program for client browser or web server. Build interactive web site with JavaScript.

JAVASCRIPT TUTORIALS

JAVASCRIPT OBJECT

JAVASCRIPT BOM

JAVASCRIPT DOM

JavaScript - innerHTML

The innerHTML property can be used to write the dynamic html on the html document.

It is used mostly in the web pages to generate the dynamic html such as registration form, comment form, links etc.

Example of innerHTML property

In this example, we are going to create the html form when user clicks on the button.

In this example, we are dynamically writing the html form inside the div name having the id mylocation. We are identifing this position by calling the document.getElementById() method.

<script type="text/javascript" >
function showcommentform() {
var data="Name:<input type='text' name='name'><br>Comment:<br><div rows='5' cols='80'></div>
<br><input type='submit' value='Post Comment'>";
document.getElementById('mylocation').innerHTML=data;
}
</script>
<form name="myForm">
<input type="button" value="comment" onclick="showcommentform()">
<div id="mylocation"></div>
</form>

Output:


Show/Hide Comment Form Example using innerHTML

<!DOCTYPE html>
<html>
<head>
<title>First JS</title>
<script>
var flag=true;
function commentform(){
var cform="<form action='Comment'>Enter Name:<br><input type='text' name='name'/><br/>
Enter Email:<br><input type='email' name='email'/><br>Enter Comment:<br/>
<div rows='5' cols='70'></div><br><input type='submit' value='Post Comment'/></form>";
if(flag){
document.getElementById("mylocation").innerHTML=cform;
flag=false;
}else{
document.getElementById("mylocation").innerHTML="";
flag=true;
}
}
</script>
</head>
<body>
<button onclick="commentform()">Comment</button>
<div id="mylocation"></div>
</body>
</html>

Output of the above example

Previous Next
Applied Art and Communication Design Course in Mumbai
Index Solutions - Web Design and Development Company Mumbai
Advance Digital Marketing Course Online
Advance Digital Marketing Course in Thane Mumbai
Online Full Stack Developer Course in Mumbai Thane
Online Job Portal in India
Index Solutions - Web Design and Development Company in Mumbai India