Inside Technique : Dynamic Content Techniques
By Scott Isaacs

Internet Explorer 4.0 pioneered the concept of Dynamic Content with the introduction of the innerHTML/Text and outerHTML/Text properties. These properties made it possible to change any of your page's content without reloading the document. The inner* and outer* properties work by parsing an HTML string and rendering it in your page. Internet Explorer 5.0 adds new support for constructing content by building the tree of HTML out of objects representing each individual element. This support represents IE5's initial implementation of the W3C Document Object Model (DOM) recommendation.

First, let's look at the original IE4 string approach to dynamic contents using the inner* and outer* properties. In Internet Explorer 4.0, these properties are only accessible after the page has loaded. For example, using the innerHTML property we can insert a list with two items into the document:

myElement.innerHTML="<UL><LI>Item 1<LI>Item 2</UL>"

Internet Explorer 5.0 expands the string based approach by allowing HTML to be constructed element by element and allowing the document's contents to be changed even during the loading of the page. We can recreate our original list example by first creating the UL element and then creating and attaching each LI element to the UL element:

var el = document.createElement("UL")
var eLI = document.createElement("LI")
eLI.innerText="Item 1"
el.insertBefore(eLI)
var eLI = document.createElement("LI")
el.innerText="Item 2"
el.insertBefore(eLI)
insertAdjacentElement("afterBegin",el)

While the second approach appears more verbose, it offers a number of benefits that can help you create more dynamic and rich pages. For simple uses of dynamic content, the inner* and outer* properties are the most effective approach. For example, if you just want to change contents in response to a user action or timer.

The inner* and outer* properties become complicated when you want to add interactions between the new elements and the rest of the page. What if you want each LI element to contain a reference to another element or object? This requires you to have access to the object representing the LI element. Unfortunately, when you manipulate the HTML as a string there is no object to reference until after the element is inserted in the page. So, to reference the inserted list we would need to do it after the insertion:

myElement.innerHTML="<UL><LI>Item 1<LI>Item 2</UL>"
var getUL = myElement.all[0]
// Assign another object to myProp
getUL.myProp = anotherObject 

This approach requires you to map the inserted HTML to hard coded references into the underlying element collections. This makes your code more difficult to maintain. When building your page element-by-element you can assign references to other objects directly to the new element when created, not when inserted.

The remainder of this article explores both the string and element-based approached to dynamic contents. To demonstrate each approach we will show you how to automatically generate and insert a table of contents for your web-page. We start with the original Internet Explorer 4.0 string-based approach.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.