Dynamically add html elements

http://www.anyforum.in/question/html/javascript/How-to-create-text-box-dynamically-as-per-the-user-requirement/288

by Ram Tobolski

HTML

<form id="form2" method="get">
    <div>
        <input type="text" name="text1" value="1" />
        <input type="button" value="Add" onclick="addNew()" />
    </div>
</form>

JavaScript

var counter = 2;

function addNew() {
    var mainContainer = document.getElementById('form2');
    var newDiv = document.createElement('div');
    var newText = document.createElement('input');
    newText.type = "input";
    newText.value = counter;
    var newDelButton = document.createElement('input');
    newDelButton.type = "button";
    newDelButton.value = "Delete";
    newDiv.appendChild(newText);
    newDiv.appendChild(newDelButton);
    mainContainer.appendChild(newDiv);
    counter++;
    newDelButton.onclick = function () {
        mainContainer.removeChild(newDiv);
    }
}