© 2004 Microsoft Corporation. All rights reserved.

Figure 1 insertAdjacentElement 
<script>
function window.onload()
{
    var elem = document.createElement("OBJECT");
    elem.classid="clsid:F554B9AB-E6C9-4FA6-BFE7-B3CB24AD5027";
    elem.id="MoneyChart";
 
    document.body.insertAdjacentElement("afterbegin", elem);
 
    alert(document.body.children[0].id);
}
</script>
Figure 2 Creating Levels 
<HTML>
  <HEAD><!--Code by LISA CASSLEY-->
      
      <BASE TARGET="_top" />

      <script language="Javascript" type="text/javascript">
      function ToggleScopeCat(sScope)
      {
        var oTable = document.all["tbl" + sScope];
        if (oTable && oTable.style.display == "block")
        {
            oTable.style.display = "none";
        }
        else
        {
            oTable.style.display = "block";
        }
      }
      </script>
  </HEAD>
  •••    
         <!-- This is the overall table—it displays the first first 
          level, but keeps the rest of the rows invisible -->
        <table id="tblScopeCats" cellpadding="0" border="1" 
         bordercolor="#000000" cellspacing="0" height="50" width="528"
         bordercolorlight="#808080" style="border-collapse: collapse">
          <tr style="padding:1px" onClick="javascript:
           ToggleScopeCat('lib">
            <td width="132" align="center" colspan="1">level1</td>
            <td width="132" align="center">test11</td>
            <td width="132" align="center">test12</td>
            <td width="132" align="center">test13</td>
          </tr>
        <table>          

              <table id="tbllib" height="75" width="524" border="1" 
               cellpadding="0" cellspacing="0" style="display:none; 
               border-collapse: collapse" bordercolorlight="#808080">
                <tr onClick="javascript: ToggleScopeCat('lib2">
                  <td width="131" align="center" 
                   style="padding:3px">level2</td>
                   •••
                      <!-- This table row displays the header of the 
                       table "Notes"-->
                      <tr>
                        <td width="131" align="center" 
                         style="padding:3px">level3</td>
                         •••
                <!-- This table row displays some of the values of the 
                 variables from the recordset -->
                <tr onClick="javascript: ToggleScopeCat('lib3">
                  <td width="131" align="center" 
                   style="padding:3px">level2</td>
                   •••
                <!-- This table row holds the third level table -->
                <tr>
                  <td colspan="4">
                    <table style="display:none; border-collapse:collapse; 
                     border: 1px inset 000000;" id="tbllib3" 
                     cellpadding="4" cellspacing="0" width="524">
                      <!-- This table row displays the header of the 
                       table "Notes"-->
                      <tr>
                        <td width="131" align="center" 
                         style="padding:3px">level3</td>
                      •••
                    </table>
                    <!-- This ends the third table -->
                  </td>
                </tr>
              </table>
              <!-- This ends the second table -->
           </td>
          </tr>
    </table>
    <!-- This ends the first table -->
Show: