JavaScript/Runtime Document Manipulation
Previous: DHTML Index Next: Finding elements

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>
<script type="text/JavaScript">
function displayMessage {
  var divObj = document.getElementById("messageText");
  if (divObj) {
    divObj.innerHTML="<b>This is the new Message from Javascript</b>";
      <input type="button" value="Display Message" onclick="displayMessage;" />
      <div id="messageText" style="width:400px; height:200px; color:#00FF00"></div>

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: DHTML Index Next: Finding elements

  This article uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.


Manage research, learning and skills at IT1me. Create an account using LinkedIn to manage and organize your IT knowledge. IT1me works like a shopping cart for information -- helping you to save, discuss and share.

  Contact Us  |  About |  IT Training & References |  IT Careers |  IT Hardware |  IT Software |  IT Books