JavaScript/Runtime Document Manipulation

From Wikibooks, open books for an open world
Jump to: navigation, search
Previous: JavaScript/DHTML Index Next: JavaScript/Introduction to the Document Object Model (DOM)


Runtime Document Manipulation

JavaScript can manipulate an HTML document that has been loaded into the browser using standard DOM (Document Object Model). Let's see an example:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
      function displayMessage() 
      {
          var divObj = document.getElementById("messageText");
          if(divObj) {
             divObj.innerHTML="<b>This is new Message from Javascript</b>";
          }
      }
</script>
</head>
   <body>
         <input type="button" value="display Message" onclick="displayMessage();" />
         <div id="messageText" style="width:400px; height:200px; color:#00FF00"></div> 
   </body>
</html>

The html document when loaded into a browser, will have one "Display Message" button. By clicking the button we could see a message below the button. By referring to the source code above, a javascript function displayMessage() was called when ever we click the "Display Message" button.

 
var divObj = document.getElementById("messageText");

document object is a DOM object that refers to the loaded HTML. By using its getElementById() method, and by passing the id/name of the HTML element, we can tap to the element's DOM representation (in this case a div tag). We add a new HTML element to the current HTML document by using the innerHTML property.


Previous: JavaScript/DHTML Index Next: JavaScript/Introduction to the Document Object Model (DOM)