Home >>Javascript Tutorial >Javascript innerHTML

Javascript innerHTML

Inner HTML in JavaScript

The Inner HTML in JavaScript is a property that is used to write the dynamic html on the html document. It is used frequently in the webpages in order to generate dynamic html e.g. Comment forms, registration form, links and more.

Here is an example of the InnerHTML property in JavaScript:

In the below mentioned example the html form will be written inside the P tag . This position will be identified by calling the document.getElementById() method.

<script type="text/javascript">  
function demo() 
{  
var name=document.getElementById('n').value;   
document.getElementById('msg').innerHTML=name;  
 }  
  
</script>  
<p id="msg"></p>
<p><label>Enter Your Name:<input type="text" id="n"/></label></p>
<p><input type="button" value="Click Here" onclick="demo()"></p>  
Output :

 

Here is another example that can Change Link using the innerHtml in JavaScript:

<script>
function myFunction() {
  document.getElementById("mylink").innerHTML = "Phptpoint";
  document.getElementById("mylink").href = "https://www.phptpoint.com/";
  document.getElementById("mylink").target = "_blank";
}
</script>
 
 
<a id="mylink" href="https://www.phptpoint.com/";>Beginner's Tutorial</a>
<button onclick="myFunction()">Change link</button>  
Output :
Beginner's Tutorial