Question

我必须在按钮上生成随机div。为此，我使用了jQuery append()，但无法正常工作。

我的代码：

<div class="form-group" id="childPlusSign" >
    <h6 class="formLabel">
        <img src="assets/img/plus.png" class="img-responsive plusSign" alt="plus_sign"> Child
    </h6>
</div>

$("#childPlusSign").click(function(){
$('#childPlusSign').append('
        <div class="col-md-6">
        <input type="date" class="form-control input-sm" name="date[]">
        </div>
        <div class="col-md-6">
        <input type="date" class="form-control input-sm" name="date[]">
        </div>  
    ');
});

Answer 1

您要附加的html字符串格式错误

$("#childPlusSign").click(function() {

      $('#childPlusSign').append('<div class = "col-md-6" ><input type = "date" class="form-control input-sm" name="date[]" style="background-color:yellow"> </div> <div class = "col-md-6" ><input type = "date" class = "form-control input-sm" name ="date[]" style="background-color:green"></div>');
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="childPlusSign">
  <h6 class="formLabel">
    <img src="assets/img/plus.png" class="img-responsive plusSign" alt="plus_sign"> Child
  </h6>
</div>

Answer 2

您需要使用此`

在append函数中使用

而不是'，因为您要附加的值是多行。或将'与一行代码一起使用。

$("#childPlusSign").click(function(){
  $('#childPlusSign').append(`
          <div class="col-md-6">
          <input type="date" class="form-control input-sm" name="date[]" />
          </div>
          <div class="col-md-6">
          <input type="date" class="form-control input-sm" name="date[]" />
          </div>  
      `);
});

Answer 3

尝试

<div class="form-group" id="childPlusSign" >
    <h6 class="formLabel">
        <img src="assets/img/plus.png" class="img-responsive plusSign" alt="plus_sign"> Child
    </h6>
</div>

    $("#childPlusSign").click(function(){
        $('#childPlusSign').append('\
            < div class= "col-md-6" >\
            <input type="date" class="form-control input-sm" name="date[]">\
        </div>\
            <div class="col-md-6">\
                <input type="date" class="form-control input-sm" name="date[]">\
        </div>\
                ');
});

无法使用jquery append

3 个答案: