如何使用 jQuery 动态创建 HTML 输入？答案

【问题标题】：How to create an HTML Input dynamically using jQuery?如何使用 jQuery 动态创建 HTML 输入？
【发布时间】：2016-05-10 06:58:58
【问题描述】：

我想在表单中使用 jQuery 在下面动态创建 html 输入。这可以使用 jQuery 吗？

<div class="form-group">
  <label class="col-sm-2 control-label">Enter Name</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" id="nameId" name="fullNme" placeholder="Enter full Name">
  </div>
</div>

我想把上面的动态div和texbox放在div class="box-body"

下面

<form id="myform" class="form-horizontal" method="post">
  <div class="box-body">


  </div>
</form>

谁能帮助我如何在 Jquery/Javascript 中实现？

提前感谢您的帮助！

【问题讨论】：

你想创建以上所有元素吗？
@Anoop Joshi - 是的
$('YOURCLICK').on('click',function(e){ $('box-body').append('<input type="text" class="YOURCLASS" name="YOURNAME[]">') })
@javabegineer 看看我的回答。

标签： javascript jquery html dynamic textbox

【解决方案1】：

你可以的，

var formgroup = $("<div/>", {
  class: "form-group"
});
formgroup.append($("<label>", {
  class: "col-sm-2 control-label",
  text: "Enter Name"
}));
var colsm = $("<div/>", {
  class: "col-sm-10"
});
var input = $("<input/>", {
  type: "text",
  class: "form-control",
  id: "nameId",
  placeholder: "Enter Full Namee"
});
colsm.append(input);
formgroup.append(colsm);
$(".box-body").append(formgroup);

Fiddle

你可以像这样给出任意数量的属性。

【讨论】：

【解决方案2】：

你可以这样做：

<script>
    var html = '<div class="form-group"><label  class="col-sm-2 control-label">Enter Name</label><div class="col-sm-10"><input type="text" class="form-control" id="nameId" name="fullNme" placeholder="Enter full Name"></div></div>';

    $('.box-body').html(html);
</script>

另一种方式是：

<div id="container-bkp" style="display:none">
<div class="form-group">
  <label class="col-sm-2 control-label">Enter Name</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" id="nameId" name="fullNme" placeholder="Enter full Name">
  </div>
</div>
</div>

<script>
    $('.box-body').html($('#container-bkp').html());
</script>

【讨论】：