Question

我使用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中添加div，这意味着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>

Answer 1

newTextBoxDiv1.appendTo("#col2")

Answer 2

Demo

Jquery的

$('#idd').click(function() {
  $( this ).append("<div >new div</div>");
});

HTML

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

Answer 3

设置外部innerHTML的{{1}}以包含内部div的HTML。

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

jquery在div中创建动态div

3 个答案:

Jquery的

HTML