HTML, CSS, & JavaScript – Getting Started

Enhancing your HTML with JavaScript

Now we have our static HTML document set up, we will dynamically populate HTML elements on the page with some in-line JavaScript. See where you write JavaScript code and how it interacts with HTML on the page.

<!DOCTYPE html> 
    <title>Hello World</title> 
    <div id="intro">Hello World!</div> 
    <div id="context1"></div> 
    <div id="context2"></div> 
    <div id="context3"></div> 
  <script type="text/javascript"> 
    var intro = document.getElementById("intro"); 
    intro.innerHTML = "JavaScript Hello World!!"; 
    function populateDiv(theDiv, populateWith){ 
      var divID = document.getElementById(theDiv); 
      divID.innerHTML = populateWith; 
    populateDiv("context1", "this is more hello world goodness!!!"); 
    populateDiv("context2", "this is context2!!!"); 
    populateDiv("context3", "this is context3!!!"); 

Example of rendered page

Completed files from this step: