StackOverflow question 10038801

<html>
<body>

    <fieldset>
        <legend>Legend</legend>
        <div id="sections"></div>
        <a id="add-new-section" href="#">add</a><br />
    </fieldset>

    <script>

    var newSection = function() {

        var section = document.createElement('div');

        var text1 = document.createElement('input');
        text1.type = 'text';
        text1.name = 'text1';
        text1.value = 'Text1';
        section.appendChild(text1);

        var space1 = document.createElement('span');
        space1.innerHTML = ' ';
        section.appendChild(space1);

        var text2 = document.createElement('input');
        text2.type = 'text';
        text2.name = 'text2';
        text2.value = 'Text2';
        text2.size = '40';
        section.appendChild(text2);

        var space2 = document.createElement('span');
        space2.innerHTML = ' ';
        section.appendChild(space2);
        section.appendChild(space2);

        var close = document.createElement('input');
        close.type = 'button';
        close.value = 'x';
        close.style.width = '26px';
        close.onclick = function() {
            var parent = this.parentNode;
            parent.parentNode.removeChild(parent);
        };
        section.appendChild(close);

        document.getElementById('sections').appendChild(section);

    };

    document.getElementById('add-new-section').onclick = newSection;

    newSection();

    </script>

</body>
</html>