Finishing a List Generator with JavaScript

Assuming that you've already read the previous installment of this series, you'll recall that I went through the development of an intuitive user interface. It allowed users to enter different options to create those popular list-wrapped links. The interface initially included three basic input elements for controlling the number of list items to be generated, as well as for supplying the respective class and ID attributes for the referenced list.

Besides creating this simple front end, I defined an important JavaScript function, called "displayListGenerator()", aimed at displaying dynamically the set of input boxes required for entering the values corresponding to the "href" attribute of each link, as well as for supplying the pertinent labels.

Logically, this relevant function was triggered by an "onchange" event handler, attached to the initial select box that was provided with the initial user interface. This means that the complete front end that belongs to this application is generated by a few progressive steps, according to the list options selected by the user.

So far, so good. In its current incarnation, the list generator is only capable of displaying the mentioned list controls; it lacks a proper area inside the web document where the all the generated (X)HTML markup that corresponds to the list-wrapped links can be copied and pasted. Thus, the question that comes now is: how can this process be performed?

Well, to provide the original application with the ability to display the complete source code for the mentioned links, in this final part of the series I'm going to define another crucial JavaScript function. It will append a simple text area dynamically to the web document tree, where the appropriate source code for the wrapped links can be copied and pasted into any text editor.

The challenge ahead of us seems rather simple, but interesting. Therefore, let's move on quickly and get this JavaScript-based list generator completed!