Question

是否可以将用户动态创建的输入添加到表单？

假设页面加载时我拥有这个：

<form id="my-form" xl-form>
... // here the inputs
</form>

然后，我创建一个输入（在页面加载之后）

<input type="input" class="integr_elements" placeholder="name" id="name">

如何将其添加到以“ my-form”作为ID的表单内？我需要将其添加到内部，因为我想使用一个GitHub插件，该插件只会影响内部的输入表格。

这可能吗？

谢谢！

PS：在发布此内容之前，在论坛上进行了搜索，但发现了2013年的帖子，并且似乎有些弃用的方法。

Answer 1

您可以将Node.appendChild()用于纯JavaScript解决方案（不使用jQuery）。

let el = document.createElement("input");
el.className = "integr_elements";
el.placeholder = "name";
el.id = "name";

let form = document.getElementById("my-form");
form.appendChild(el);

<form id="my-form" xl-form></form>

Answer 2

$('#my-form').append('<input type="input" class="integr_elements" placeholder="name" id="name">');

Answer 3

像这样？只需将html内容附加或附加到表单字段等上，就可以更改值，名称，类型甚至输入类型！

$(document).ready(function(){
  $("#myForm").append("<input name='entry1' type='text'></input>");
  $("#myForm").append("<input name='entry2' type='password'></input>");
  $("#myForm").append("<input name='entry3' type='text'></input>");
})

input {
display:block;
margin:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  
</form>

使用JS将输入添加到表单

3 个答案: