Dynamically Creating Elements and Events

See Also

In addition to laying out your page elements in the page designer, you can create HTML elements and insert them on the page from code. You might do this if you want to create a page in response to a user's actions. For example, you might dynamically create a page and its contents in response to a query. You create and insert an HTML element by writing HTML in your code, using the DHTML object model's insertAdjacentHTML method.

Example: Retrieving Customer Information

Suppose you are building an application in which a search button launches a database query that returns a customer's last name and order number. You want to create page elements on the fly to contain your query results.

The first thing the code must do in this example is retrieve the user's search criteria from two text fields on the page. These fields have the IDs "custLN," for the last name for which the user wants to search,  and "orderNO" for the order number. In this case, you could use two variables to retrieve the search criteria from these fields:

Private Function cmdSearch_onclick() As Boolean
   Dim sLastName As String
   Dim sOrderNum As String
   Dim divCustInfo as HTMLDivElement
   'Retrieve the search criteria and store it in the variables
   SLastName = Me.custLN.Value
   SorderNum = Me.orderNO.Value
End Function

Example: Creating Elements and Replacing Contents

After you retrieve the values from the query page, you will perform the query and send the results to the user by creating and populating a DIV tag on a results page. There are a series of steps you need to perform in this process:

1. Retrieve the query results from a database.
   
   
2. Check to make sure the DIV to contain the results does not already exist. If the query has previously been run, the DIV tag may already exist on the page. If the query has not been run before, you must create the DIV tag in your code.
   
   
3. If necessary, create the DIV tag and other necessary elements.
   
   
4. Insert your results set into the DIV tag on the results page.

The following code shows how you would check for the DIV tag as part of the function begun in the previous section.

Private Function cmdSearch_onclick() As Boolean
   'Code here to Dim variables and retrieve search criteria

   'Check for a DIV tag called custinfo. 
   Set divCustInfo = Me.Document.All("custinfo")

   'Create three sets of HTML elements if the DIV tag is not 
   'found: a separator line, a DIV with text, and a programmable
   'DIV to contain the query results.
   If divCustInfo Is Nothing Then
      Me.Document.body.insertAdjacentHTML "BeforeEnd", _
        "<DIV><HR SIZE=2></DIV>"
      Me.Document.body.insertAdjacentHTML "BeforeEnd", _
        "<DIV CLASS=custhead>Customer Information</DIV>
      Me.Document.body.insertAdjacentHTML "BeforeEnd", _
        "<DIV id=custinfo>"
   
      'Run the query using a CustomerQuery function and insert the 
      'results in the custinfo DIV tag.
      If sLastName <> "" Then
         Me.Document.body.insertAdjacentHTML "BeforeEnd", _
           CustomerQuery(sLastName)
      EndIf

      'Create and insert the closing tag for the programmable DIV
      'element.
      Me.Document.body.insertAdjacentHTML "BeforeEnd", "</DIV>"

   'If the DIV tag already exists, run the CustomerQuery function and
   'replace the element with the query results.
   Else
      DivCustInfo.innerHTML = CustomerQuery(sLastName)
   EndIf
End Function