Как сделать повторение поля формы в JavaScript?

Я получил форму со списком игр, которые я прошу людей добавить, что они играли.

Он говорит "Добавить игру" с гиперссылкой, которая имеет обработчик события onClick, который направляет функцию JavaScript - он делает это только один раз, но я хочу, чтобы он делал это столько раз, сколько пользователь решает добавить игры - без каких-либо ограничений - как это можно сделать?

Вот снимки экрана, сопровождаемые кодом:

http://i59.tinypic.com/16jk1nt.png

http://i59.tinypic.com/2zzntoo.png

Вот код JavaScript для изображений выше:

function addFields1(){
        var container = document.getElementById("container1");
        while (container.hasChildNodes()) {
            container.removeChild(container.lastChild);
        }
            container.appendChild(document.createTextNode("Add Game"));
            var input = document.createElement("input");
            input.type = "text";
            container.appendChild(input);
            container.appendChild(document.createElement("br"));

    }

Вот HTML-форма для вышеуказанного кода JavaScript:

    <input type="text" id="member1" name="member1" value="">Add Game<br />
<a href="#" id="filldetails" onclick="addFields1()">Add Game</a>
    <div id="container1"/>

Когда я нажимаю гиперссылку "Добавить игру", она вводится в пустое поле ввода только один раз, пока я хочу, чтобы она вводилась столько раз, сколько я нажимаю на гиперссылку "Добавить игру". Кроме того, мне бы хотелось, чтобы гиперссылка "Добавить игру" копировалась при каждом нажатии на эту ссылку.

Источник

1 ответ 

<html>
    <script>
        function addFields1(){
            var container = document.getElementById("container1");

            //remove button
            var addGameButton = document.getElementById("filldetails");
            container.removeChild(addGameButton);

            //create and insert input/text
            var input = document.createElement("input");
            input.type = "text";
            container.appendChild(input);
            container.appendChild(document.createTextNode("Add Game"));
            container.appendChild(document.createElement("br"));

            //create and insert button
            addGameButton = document.createElement("a");
            addGameButton.id="filldetails"
            addGameButton.href="#";
            addGameButton.onclick=function(){addFields1();};
            addGameButton.text="Add Game";
            container.appendChild(addGameButton);

        }

    </script>

    <body>
        <form>
            <div id="container1">
                <input type="text" id="member1" name="member1" value="">Add Game<br />
                <a href="#" id="filldetails" onclick="addFields1()">Add Game</a>
            </div>

        </form>
    </body>
</html>
Источник
Другие вопросы по тегам