Runtime Document Manipulation

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 uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.

JavaScript/Runtime_document_manipulation
 



 

Connect with defaultLogic
What We've Done
Led Digital Marketing Efforts of Top 500 e-Retailers.
Worked with Top Brands at Leading Agencies.
Successfully Managed Over $50 million in Digital Ad Spend.
Developed Strategies and Processes that Enabled Brands to Grow During an Economic Downturn.
Taught Advanced Internet Marketing Strategies at the graduate level.


Manage research, learning and skills at defaultlogic.com. Create an account using LinkedIn to manage and organize your omni-channel knowledge. defaultlogic.com is like a shopping cart for information -- helping you to save, discuss and share.


  Contact Us