Javascript 当涉及嵌套元素时，如何使用jQuery操作html表单？

我有一个空表单，需要根据条件动态填充我想称之为迷你表单的内容。例如，这可以是要求提供餐厅名称和位置的表单。现在，根据餐馆的数量（比如说“m”），我想在大表单“m”中添加一个小表单，要求输入名称和位置。我如何使用jQuery创建这些小表单，这些小表单包含餐厅的名称和位置，并将它们分别附加到大表单中。html看起来像这样。但是我需要根据用户需要多少表单以及是否需要任何表单来动态创建它

编辑-我知道我们不能嵌套表单。我已将内部的“form”元素重命名为“div”

<form>

<div id = 1> 
Name: <input type = "text" name = "name"> 
Location: <input type = "text" name ="location>
</div>

<div id = 2> 
Name: <input type = "text" name = "name"> 
Location: <input type = "text" name ="location>
</div>

... 
</form>

姓名：
地点：
... 

不能嵌套表单。如果要在表单中重复输入，请为其指定数组样式名称：

<div id = 1> 
Name: <input type = "text" name = "name[]"> 
Location: <input type = "text" name ="location[]">
</div>

---

您可以尝试以下方法：

    <script>
    function addMiniForms(n)
    {
        for (i=0; i<n ; i++)
        {
            var $div = $("<div id='" + i + "'></div>");
            var $labelName = $("<label for='name" + i + "'>Name</label>");
            var $inputName = $("<input type='text' id='name" + i +' />");
            var $labelLocation = $("<label for='location" + i + "'>Location</label>");
            var $inputLocation = $("<input type='text' id='location" + i +' />");
            $div.append($labelName);
            $div.append($inputName);
            $div.append($labelLocation);
            $div.append($inputLocation);
            $("#containerid").append($div);
        };
    };
</script>

函数addMiniForms（n）
{
对于（i=0；i首先，您需要查找用户输入餐厅数量时输入的更改：

$('#noofrestaurants').change(function(){

然后，您需要循环输入的数字，并每次创建新的输入：

var restaurants = $('#noofrestaurants').val();
for (var i = 0; i < restaurants; i++){
$('#miniformcontainer').append('<input type="text" name="rest_name[]"/><input type="text" name="rest_loc[]"/>');
}
});

var restaurants=$（'noofrestaurants'）.val（）；
对于（变量i=0；i<餐厅；i++）{
$（“#miniformcontainer”）.append（“”）；
}
});
提交表单时，您对表单做了什么？您不能嵌套表单：我打算使用该信息以及页面上的其他信息，创建一个json对象并将其发送到后端进行处理。当然，您不能将其嵌套为表单，但您可以动态添加输入（并将其样式设置为单独的表单）编辑了这个问题，现在我知道我们不能嵌套表单。是的，有一次我被告知不能嵌套表单时，我将问题中的内部表单元素改为“div”。但是，我需要知道如何使用jQuery或javascript动态地执行此操作。问题是什么？让jQuery将这个DIV附加到表单中。我已经将jQuery添加到了答案中。结果我无法将两个答案标记为正确答案。无论如何，谢谢你！
var restaurants = $('#noofrestaurants').val();
for (var i = 0; i < restaurants; i++){
$('#miniformcontainer').append('<input type="text" name="rest_name[]"/><input type="text" name="rest_loc[]"/>');
}
});