javascript - 如何在不重新加载页面的情况下在表单中创建 html 元素？

Question

我正在寻找一种通过使用例如按钮将 html 元素添加到表单的方法。我一直在查看一些示例，但它们非常大(大约是我想要构建的实际表单大小的 3 倍以上)所以我想知道是否有更好的方法来解决这个问题。

我的想法是这样的:

<form action='blabla.php' method='post'>
    <!-- Insert button here to add a new element -->
    <input type='text' name='desc_1'>
</form>

点击按钮，应该呈现以下内容:

<form action='blabla.php' method='post'>
    <!-- Insert button here to add a new element -->
    <input type='text' name='desc_1'>
    <input type='text' name='desc_2'>
</form>

我想创建一个新的输入字段，而无需重新加载页面和丢失表单中输入的 ev 数据。猜猜这是我应该通过 javascript 甚至 jquery 实现的东西。我知道如何编辑现有输入字段，但不知道如何创建新输入字段并使其遵循其编号范围。任何人都知道如何使用 javascript 函数来解决这个问题？或者我应该花一些时间研究 jquery 以获得更流畅的解决方案？

Answer 1

你可以做到

html

<button onclick="create();">Create Field</button><br><br>
<form id="frm">

    <input type='text' name='desc_1' placeholder="Input Field 1"><br>
</form>

javascript

var count=1;
function create(){
//alert();
    count++;
    document.getElementById('frm').innerHTML+='<br/><input type="text" id="'+count+'" placeholder="Input Field'+count+'"  /><br/>';
    e.prventDefault();
}

FIDDLE