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> <html> <head> <title>Hello World</title> </head> <body> <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!!!"); </script> </body> </html>
Example of rendered page
Completed files from this step:
HelloWorld_Step2.zip
Next
Adding in CSS