To illustrate the concepts I mentioned in my notes on Dynamic Content with Javascript, I thought I would present an example.

This is taken from a web application that I’ve been working with a team to develop. The initial version of this page had a single text field that required the user to enter a “Target Expression” that amounted to a series of IP address ranges and information on how to access information on the machines found in the ranges.

Here is an example:

10.10.10.30-90 
        161:snmp:community=public
        22:ssh:user=root&pass=sdfsdf

Yes, it is quite complicated and prone to syntax errors, so I worked up some Javascript to make the input ask for each piece in individual fields that can be labeled, and to grow the input if the user requires many IP address ranges, or many ways of accessing information on those machines.

You can see the Javascript source code, and click the button below to see this example in action.

The real beauty of this example is that it uses a technique that doesn’t depend on lots of browser-specific code. However, it does utilize the DOM (Document Object Model) which is not available on older browsers.