Javascript jquery在div中创建动态div_Javascript_Jquery_Html

Javascript jquery在div中创建动态div

javascript jquery html

Javascript jquery在div中创建动态div,javascript,jquery,html,Javascript,Jquery,Html,我已经使用JQuery创建了动态插入。现在我无法在div中创建动态div这是我的代码片段 <html> <head> <title>jQuery add / remove textbox example</title> <script src="jquery-1.10.2.min.js" type="text/javascript"></script> </head> <body> &l

我已经使用JQuery创建了动态插入。现在我无法在div中创建动态div这是我的代码片段

   <html>
<head>
<title>jQuery add / remove textbox example</title>
 <script src="jquery-1.10.2.min.js" type="text/javascript"></script>

</head>

<body>

<h1>jQuery add / remove textbox example</h1>


<script type="text/javascript">



$(document).ready(function(){

    var counter = 2;

    $("#addButton").click(function () {

    if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
    }   

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'form-group' + counter)
         .attr("class", 'form-group' );

           var newTextBoxDiv1 = $(document.createElement('div'))
         .attr("id", 'col' + counter)
         .attr("class", 'col-md-8' );


    newTextBoxDiv.after().html('<label class="col-md-3 control-label">Achievement #'+ counter + ' : </label>');

    newTextBoxDiv1.after().html(
          '<input type="text" name="achievement' + counter + 
          '" id="achievement' + counter + '" value="" >');

    newTextBoxDiv.appendTo("#TextBoxesGroup");
    newTextBoxDiv1.appendTo("#TextBoxesGroup")

    counter++;
     });

     $("#removeButton").click(function () {
    if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   

    counter--;

        $("#form-group" + counter).remove();
        $("#achievement" + counter).remove();

     });


  });
</script>
</head><body>

<div id='TextBoxesGroup'>
    <div id="form-group1">
        <label class="col-md-3 control-label">Achievement #1 : </label><input type='textbox' name="achievement" id='achievement' >
    </div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>

</body>
</html>

这样可以创建动态Div

<div id="col2" class="col-md-8"><input type="text" value="" id="achievement2" name="achievement2"></div>
<div id="form-group3" class="form-group"><label class="col-md-3 control-label">Achievement #3 : </label></div>

<div id="col2" class="col-md-8"><input type="text" value="" id="achievement2" name="achievement2">
<div id="form-group3" class="form-group"><label class="col-md-3 control-label">Achievement #3 : </label></div></div>

但是我想附加div，这意味着div中包含div，代码应该是这样的

<div id="col2" class="col-md-8"><input type="text" value="" id="achievement2" name="achievement2"></div>
<div id="form-group3" class="form-group"><label class="col-md-3 control-label">Achievement #3 : </label></div>

<div id="col2" class="col-md-8"><input type="text" value="" id="achievement2" name="achievement2">
<div id="form-group3" class="form-group"><label class="col-md-3 control-label">Achievement #3 : </label></div></div>

滑动分页 Html 将外部div的innerHTML设置为包含内部div的HTML

通过这种方式，您可以根据情况动态生成所需的所有不同的内部div

<div id="idd">
    Contgert
</div>