JavaScript/Runtime document manipulation

From Wikibooks, open books for an open world
Jump to navigation Jump to search
Previous: DHTML Index Next: Finding elements

Runtime Document Manipulation[edit]

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