Post
Ask Question

Using GetElementById Function With InnerHTML Property in JavaScript

Introduction

 
This article shows how to use the GetElementById function with the InnerHTML property in ASP.NET using JavaScript. In this article, you will see how to get the id of the HTML element using the GetElementById function and use it with the InnerHTML property. First start Visual Studio .NET and make a new ASP.NET web site using Visual Studio 2010.
 
GetElementById Function
 
The getElementById function refers to the HTML element using its ID. The id property sets or returns the id of an element.
  1. <script type="text/javascript">  
  2.    
  3.          ShowID() {  
  4.              Getid = document.getElementById('TextMessage');  
  5.             alert(Getid.id);  
  6.         }        
  7.    
  8. </script> 
Output
 
getlementid-function-in-javascript.jpg
 

What is Inner HTML Property?

 
The inner HTML property can be used to modify an HTML document. The innerHTML property exists in all types of major browsers. When you use innerHTML, you can change the page's content without refreshing the page. This can make your website feel quicker and more responsive to user input.
 
Syntax
 
The syntax for using innerHTML looks like this:
 
document.getElementById('ID of element').innerHTML = 'Data or content';
  • getElementById: The getElementById refers to the HTML element using its ID. 
  • Data or content: Data is the new content to go into the element.
So to make it work use the following JavaScript function code in your page:
  1. <script type="text/javascript">  
  2.      function ShowMessage() {  
  3.      document.getElementById('TextMessage').innerHTML = 'C-sharpCorner';  
  4.    
  5.      }        
  6. </script> 
Now drag and drop a Button Control onto the form such that you have:
  1. <input type="button" onclick="ShowMessage()" value="Show Message" />   
  2. <p id="TextMessage"></p> 
Example
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RefreshPage.aspx.cs" Inherits="RefreshPage" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.    
  6.     <title></title>  
  7.     <script type="text/javascript">  
  8.         function ShowMessage() {  
  9.             document.getElementById('TextMessage').innerHTML = 'C-sharpCorner';  
  10.    
  11.         }        
  12. </script>  
  13. </head>  
  14. <body>  
  15.    
  16.     <form id="form1" runat="server">  
  17.     <div>  
  18.     <input type="button" onclick="ShowMessage()" value="Show Message" />   
  19.     <p id="TextMessage"></p>  
  20.    
  21.     </div>  
  22.     </form>  
  23. </body>  
  24. </html>  
Output
 
InnerHTML-property-in-javascript.jpg


Similar Articles