Finishing a List Generator with JavaScript

As I expressed in the chapter that you just read, this list generating application is still incomplete, because it cannot display all the source code that corresponds to the already familiar list-wrapped links. Thus, in order to address this important issue, I'm going to define another key JavaScript function, in this case named "displayList()".

As you'll see shortly, this function will be tasked with performing a few relevant tasks, like appending a <textarea> element to the web document tree, and populating it with the pertinent code of the dynamically-generated links. As a result, this will allow a quick copy/paste operation. Pretty simple, isn't it?

Having explained the objective of this new function, below I listed its signature. It's as follows:    

// display unordered list of links
function displayList(){
// remove existing list boxes container
var div=document.getElementById('listcontainer');
if(div){div.parentNode.removeChild(div)};
// create general containing DIV
var div=document.createElement('div');
div.setAttribute('id','listcontainer');
div.className='elemcontainer';
// create <textarea> element
var textarea=document.createElement('textarea');
textarea.setAttribute('rows','10');
textarea.setAttribute('cols','71');
// append <textarea> element to general DIV
div.appendChild(textarea);
// append general DIV to document tree
document.getElementsByTagName('body')[0].appendChild(div);
var items=document.getElementsByTagName('form')[1].elements;
if(!items){return};
// get class value for list
var listclass=document.getElementsByTagName('form')[0].

elements[1].value;
// get ID value for list
var listid=document.getElementsByTagName('form')[0].

elements[2].value;
var listhtml='<ul';
if(listclass){listhtml+=' class="'+listclass+'"'};
if(listid){listhtml+='id="'+listid+'"'};
listhtml+='>n';
// generate XHTML list markup
for(var i=0;i<items.length-1;i+=2){
if(items[i].getAttribute('type')!='button'){
listhtml+='<li><a href="'+items[i].value+'">

'+items[i+1].value+'</a></li>n';
}
}
listhtml+='</ul>';
// include XHTML list markup into <textarea> element
textarea.value=listhtml;
// select XHTML list markup
textarea.select();           
}

That's all you need to learn concerning the definition of the above function. As you can see, the function in question performs some useful tasks that were previously discussed, such as appending a regular <textarea> element to the web page, and filling this box with the markup that corresponds to the list-wrapped links.

What's more, all the operations carried out by this function can be grasped much more easily if you take a look at the following image. It captures a particular instance of the application, where the respective <textarea> container has been populated with the (X)HTML of the list being generated dynamically:

In this specific example, you can see that the application has neatly outputted all the markup that corresponds to a regular (X)HTML list, where each one of its items includes a link as well. Also, this code is displayed in the containing <textarea> element that I mentioned before, and certainly it's ready to be copied and pasted. Simple and efficient!

Now that you have learned how the "displayList()" function fits into the whole picture, it's time to leap forward and face the last section of this article, where I'll be listing the complete source code for this JavaScript-based application, this time including the previously-defined function.

To see how the entire list generator looks, jump straight into the following section and keep reading.