JavaScript/Runtime Document Manipulation
Runtime Document Manipulation
JavaScript can manipulate an HTML document that have been loaded into the browser using standard DOM (Document Object Model). Let's see an example:
<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.
