how to append new element in javascript on each button click

Question

When i click a link, JS adds a new file tag to the page but every time it reloads all the file tags. What i need is that when i click on a link, it should append a file tag without re-loading earlier file tags.

Please suggest if any one has an idea about this.

Following is my code.

var intTextBox = 0; 
function addElement() 
{
    intTextBox = intTextBox + 1;
    var contentID = document.getElementById('content');
    contentID.innerHTML = "";
    var howManyTextBoxes = intTextBox;  
    for ( var i = 0; i < howManyTextBoxes; i++) 
    {               
        var newTBDiv = document.createElement('div');           
        newTBDiv.setAttribute('id', 'strText' + intTextBox);
        newTBDiv.innerHTML += "<input type=file name='fileUpload' size='40'/>";                             
        contentID.appendChild(newTBDiv);                        
}

and this is how i call to JS function.

    <a href="javascript:addElement();">Attach more files</a>

Answer 1

You should return false from that function, otherwise the link reloads the page:

function addElement() {
    intTextBox = intTextBox + 1;

    var contentID = document.getElementById('content');
    contentID.innerHTML = "";
    var howManyTextBoxes = intTextBox;  
    for ( var i = 0; i < howManyTextBoxes; i++) {               
    var newTBDiv = document.createElement('div');           
    newTBDiv.setAttribute('id', 'strText' + intTextBox);
    newTBDiv.innerHTML += "<input type=file name='fileUpload' size='40'/>";                             contentID.appendChild(newTBDiv);                            
    return false;
}

Answer 2

You can call like this :

<a href="javascript:addElement();return false;">Attach more files</a>

do not forget the return false;