© 2004 Microsoft Corporation. All rights reserved.

  • Article

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" />

  &lt;script language="Javascript" type="text/javascript"&gt;
  function ToggleScopeCat(sScope)
  {
    var oTable = document.all["tbl" + sScope];
    if (oTable &amp;&amp; oTable.style.display == "block")
    {
        oTable.style.display = "none";
    }
    else
    {
        oTable.style.display = "block";
    }
  }
  &lt;/script&gt;



</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>


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