使用JS向表单添加输入

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

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

Answer 2

像这样的东西？只需将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>

Answer 3

你可以使用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>