javascript - 如何动态插入表单

Question

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

<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>

例如，如果用户选择“主页”，则“主页”表单应显示在数据列表的底部。

有人知道如何做到这一点吗？

Answer 1

你有很多选择。您可以使用 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);