使用javascript在按钮单击上添加文本框

我正在处理一个带有宠物文本框和“添加宠物”按钮的网络表单。每次单击该按钮时，都应在原始文本框下方显示一个附加文本框。

我假设这将通过一个 onclick 事件来完成，但我不知道如何让它工作。

这是我到目前为止的代码：

     <html>
    <head>
     <title>Project 4</title>
    </head>

    <body>
            <form name="myForm" onsubmit="return validateForm()">
            Pets: <input type="text" id="pets">
            <input type="button" id="addPet" value="Add Pet">
            <br>
            </form>
        <script type="text/javascript">
            function makeCopy() {
                var copy = <input type="text">;
                return copy;
            }
        </script>
    </body>
</html>

这还有其他部分，但它们都不会影响我遇到的这个特定问题，所以没有看到需要包含完整代码，因为它相当长。

非常感谢任何建议。

更新：我在阅读答案后意识到我应该包含更多我的代码，让你们更好地了解我页面的实际布局。我的表单中有几个文本字段，需要在原始“宠物”文本框的正下方显示额外的文本框。这是我拼凑的一个 jfiddle，可以让你们更好地了解布局。 http://jsfiddle.net/a5m8nqwk/

原文由 user2932587 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 321

function createPetField() { var input = document.createElement('input'); input.type = 'text'; input.name = 'pet[]'; return input; } var form = document.getElementById('myForm'); document.getElementById('addPet').addEventListener('click', function(e) { form.appendChild(createPetField()); });

document.getElementById("addPet").onclick = function() { var form = document.getElementById("myForm"); var input = document.createElement("input"); input.type = "text"; var br = document.createElement("br"); form.appendChild(input); form.appendChild(br); }

使用javascript在按钮单击上添加文本框

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

什么是闭包？闭包有哪些应用场景？

Stack Overflow 翻译