AJAX Tutorial: JavaScript Events and DOM

In the next exercise, we will create a simple HTML structure from JavaScript code using the DOM. When creating a web page that has dynamically generated parts, you first need to create its template (which contains the static parts), and use placeholders for the dynamic parts. The placeholders must be uniquely identifiable HTML elements (elements with the ID attribute set).

The typical elements used as placeholders are <div> and <span>, due to their generic usage purpose. In practice they’re typically used in conjunction with CSS to customize the appearance of the displayed content. The and elements are nicely (and briefly) described at http://en.wikipedia.org/wiki/Span_and_div.

Take a look at the following HTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>AJAX Tutorial: JavaScript Events and DOM</title>
  </head>
  <body>
    <p>
      Hello dude! Here's a cool list of colors for you:
    </p>
    <ul>
      <li>Black</li>
      <li>Orange</li>
      <li>Pink</li>
    </ul>
  </body>
</html>

Suppose that you want to have the <ul> element and its children – which are highlighted in the code snippet – generated dynamically using JavaScript and DOM. The first step is to create a placeholder in their place. This placeholder must have an id, so that it can be then identified by your JavaScript code. If the

element is used as a placeholder, then your page would look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>AJAX Tutorial: JavaScript Events and DOM</title>
  </head>
  <body>
    <p>
      Hello dude! Here's a cool list of colors for you:
    </p>
    <div id="myDivElement"/>
  </body>
</html>

Your goals for the exercise are:

Access the named <div> element programmatically from a JavaScript function.
Have the JavaScript code execute after the HTML page loads, so that it can access the <div> element. HTML elements in aren’t accessible from JavaScript code that executes in the element, so we can’t use the same technique as in the previous exercise. Now we will execute the JavaScript code from the <body> element's onload event.
Group the JavaScript code in a function for easier code handling.

Implement the exercise step by step and find detailed explanations in our book, Microsoft AJAX Library Essentials: JavaScript in ASP.NET AJAX 1.0 Explained.

AJAX Tutorial: JavaScript and the Document Object Model (DOM)

AJAX Exercise Explanations