Inside Technique : Dynamic Content Techniques : Object-based Dynamic Content

Internet Explorer 5.0 adds new methods that let you construct your HTML element by element. These methods are part of Internet Explorer 5.0's initial implementation of the W3C DOM recommendation. Rather than build a large HTML string and insert it into your document you build the HTML piece by piece. To build your HTML tree you use the following three new methods:

• document.createElement()
• element.insertBefore()
• element.insertAdjacentElement()

The createElement() method is used to create a new element object. By itself this new object is not associated with your document and therefore is not rendered. The createElement() method originated in with limited utility in Internet Explorer 4.0. In Internet Explorer 4.0, you could only create IMG, OPTION, and AREA elements. Internet Explorer 5.0 improves the support for this method to every HTML element.

For our table of contents example, we need to first create an UL element to act as our list container. We create the UL element by calling the document's createElement() method:

var el = document.createElement("UL")
el.id = "toc"

The createElement() method returns a reference to the newly created UL element. After we create the element we define the element's ID. Different from Internet Explorer 4.0, the element ID can now be changed at any time.

The next step is to iterate over all the headers and create an LI element for each one. On each LI element we are also going to set the className, associate the entry with the contents, and hook up the onclick handler. Different from the IE4 approach, all of this can be done in one pass of the document:

  var el = document.createElement("UL")
  el.id = "toc"
  var cAll = document.body.all
  var iAll = cAll.length
  var tagList = "H1;H2;H3;H4;H5;H6;"
  for (var i=0;i<iAll;i++)
    if (tagList.indexOf(cAll[i].tagName+";")>=0) {
      var eLI = document.createElement("LI")
      eLI.className = "toc" + cAll[i].tagName
      eLI.target = cAll[i]
      eLI.onclick = goTarget
      eLI.innerText=cAll[i].innerText
      el.insertBefore(eLI)
    }

This approach causes the table of contents to be built iteratively. At the end of each loop iteration we are inserting the new element as a child of the list. The insertBefore method by default inserts the new element as the last child. The insertBefore method also has an optional second argument which lets you insert the element before another child. We did not need to use this argument in our example since all entries are added to the end of the list.

After this script executes, we have the complete table of contents. However, this table of contents is kept in memory and is not rendered in your document. This is because the elements we created were never inserted into the document. The last step is to insert our HTML fragment that represents the table of contents into the document.

To insert the table of contents, we are going to use the insertAdjacentElement method. This method is analogous to the insertAdjacentHTML method that inserts an HTML string into your document but is used for your object-based HTML sub-tree. This method enables you to insert the HTML tree before or after a the begin or end tag of an element. We will use this method to insert our new table of contents immediately following the begin BODY tag:

  document.body.insertAdjacentElement("afterBegin",el)

Below brings all of the code together into a single function:

function doLoad() {
  var el = document.createElement("UL")
  el.id = "toc"
  var cAll = document.body.all
  var iAll = cAll.length
  var tagList = "H1;H2;H3;H4;H5;H6;"
  for (var i=0;i<iAll;i++)
    if (tagList.indexOf(cAll[i].tagName+";")>=0) {
      var eLI = document.createElement("LI")
      eLI.className = "toc" + cAll[i].tagName
      eLI.target = cAll[i]
      eLI.onclick = goTarget
      eLI.innerText = cAll[i].innerText
      el.insertBefore(eLI)
    }
  document.body.insertAdjacentElement("afterBegin",el)
}

window.onload = doLoad

Next we conclude by explaining the relationship between the IE5 solution and the W3C DOM and providing a simple demonstration (in IE4/5).

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