jQueryを使用してHTML入力を動的に作成する方法は？

Question

フォーム内で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> 

私は誰かが私はjQueryの/ JavaScriptで実現することができますどのように助けることができますのdivクラス= "ボックス・ボディ"

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


    </div> 
</form> 

の下で上記の動的なdiv要素とtexboxを配置したいですか？

あなたの助けを前もって感謝してください！

あなたはこのように行うことができます

Answer 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

あなたは、任意の数を与えることができます〜でこのような賛辞。

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