JavaScript/Runtime document manipulation

< JavaScript

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.

This article is issued from Wikibooks. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.