Javascript 如何动态插入表单

我有一个页面，我希望根据datalist值动态插入一个表单，而无需重新加载页面

<form action='#' method='get'>
    <input list="category" name="category">
    <datalist id="category">
        <option value="Home">
        <option value="Car">
        <option value="Mobile">
    </datalist>
    <input type="submit">
</form>

例如，如果一个人选择Home，那么Home表单应该显示在数据列表的底部

---

有人知道怎么做吗？

你有很多选择。您可以使用

innerHTML

document.getElementById("id_here").append(string); //or innerHTML = string; where string = your code above!

或者您可以采用另一种方法，使用

createElement

动态组装表单

var x = document.createElement("form");
x.id = "derp";
document.body.idtoappendto.appendChild(x);

---

创建一个html文件，其中包含您的表单或多个html文件，每个html文件包含一个表单，并在要显示表单的页面中，根据用户所在的页面编写一些ajax请求，调用相应的表单文件，获取其html并在任何需要的地方显示它

例如，在主页中，您希望显示homeform.html，然后在目录中创建homeform.html，并在home.html中编写一个ajax函数，获取homeform.html并将其显示在home.html页面上。

试试这个

我认为这将是一个简单的解决方案

$('#submit').click(function () {
    var cat = $('#cat').val();
    $('#'+cat).show();
});

---

您只需使用以下代码即可完成此操作

首先，设置与category value同名的表单id属性&首先使用

style=“display:none”

隐藏所有表单。然后

 $("input[type='submit']").click(function () {
        var category = $("input[name='category']").val();
              $('#'+category).show();
  });

---

有很多想法，你的想法是什么？到目前为止，您尝试了什么？生成表单的HTML（或构成生成表单的元素）来自何处？可能重复感谢亲爱的-未定义