Progress Monitor for IdealProgrammer.com

Take Swift, Intelligent, Massive, Planned, Loving, Effective (S.I.M.P.L.E.) Action to Transform Self into Ideal

Skip Repetitive Navigational Links

Home

News

Presenters

Contact

Please login

JavaScript (JS) innerHTML Example

Description: Illustrates the JavaScript syntax for the Anchor Object innerHTML Property .

Syntax: object.innerHTML=text – Allows you to retrieve or assign innerHTML text for linked objects.

JavaScript (JS) innerHTML Example Code:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>IdealProgrammer.com: innerHTML </title>
    <!-- 
    ***************************************************
    * This example is from http://idealprogrammer.com *
    ***************************************************
 
 
    -->
 
 
 
   </head>
  <body>
      <a href="http://www.google.com" id="idGoogle">Google</a><br /><br />
      <a href="http://www.yahoo.com" id="idYahoo">Yahoo</a><br /><br />
      <a href="http://idealprogrammer.com" id="idIdealProgrammer">IdealProgrammer</a><br /><br />
      <a href="http://myqol.com" id="idProgressMonitor">ProgressMonitor</a><br /><br />
 
   <script type="text/javascript">
       //*****************************************************
       // DOM Objects
       //*****************************************************
 
 
       //*****************************************************
       //    ***    Anchor Object Properties   ***
       //*****************************************************
 
       //*****************************************************
       // innerHTML
       //*****************************************************
 
       //    SYNTAX:
       //    object.innerHTML=idname  Allows you to retrieve or assign  
       //               text to an object
 
       // Two ways to retrieve innerHTML   
       //   1. GetElementsByTagName
            myObject=document.getElementsByTagName('a')[0];
            document.write("Google - Using getElementsByTagName : " + myObject.innerHTML);
            document.write("<br />");
      //   2. GetElementById
            document.write("Yahoo - Using getElementById: ");
            document.write(document.getElementById('idYahoo').innerHTML);
 
            document.write("<br /><br />");
       // Two ways to assign innerHTML
 
            //   1. GetElementById
            myThirdElement = document.getElementById('idIdealProgrammer');
            myThirdElement.innerHTML = "New IdealProgrammer";
            document.write("<br />IdealProgrammer innerHTML changed to New Ideal Programmer: ", myThirdElement.innerHTML);
 
       //   2. GetElementsByTagName      
            myFourthElement = document.getElementsByTagName('a')[3];
            myFourthElement.innerHTML = "New Progress Monitor";
            document.write("<br />ProgressMonitor innerHTML changed to New Progress Monitor: ", myFourthElement.innerHTML)
 
</script>
 
  </body>
</html>