为什么我无法使用jQuery将HTML动态添加到页面？

Question

I've following HTML code of Bootstrap Modal dialog box:

<div class="modal fade" id="rebateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Submit Form</h4>
      </div>
      <div class="modal-body">
        <p style="text-align: justify;"><span style="font-weight: 700;"></p>  
        <br/>
        <!-- Here I want to dynamically add the HTML from AJAX response -->
        <form id="request_form" method="post" class="form-horizontal" action="">
        </form>
      </div>
    </div>
  </div>
</div>

In the above code I want to add the HTML code dynamically after

<div class="modal-body">
  <p style="text-align: justify;"><span style="font-weight: 700;"></p>  
  <br/>

using jQuery AJAX.

For it I tried below code:

$('#request_form').submit(function(e) {
  var form = $(this);

  var formdata = false;

  if(window.FormData) {
    formdata = new FormData(form[0]);
  }

  var formAction = form.attr('action');

  $.ajax({
    url         : 'xyz.php',
    type        : 'POST',    
    cache       : false,
    data        : formdata ? formdata : form.serialize(),
    contentType : false,
    processData : false,

    success: function(response) {alert(response);
        // Below variable contains the HTML code that I want to add after <br/>

        var htmlString = "<div class='alert alert-danger alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>"+response+"</div>"

        $(htmlString).insertBefore('div.modal-body:first-child');

    }
  });
  e.preventDefault();
});

But I'm not able to do so. Getting error in console as

ReferenceError: htmlString is not defined

No new HTML is coming in Bootstrap modal.

The variable response contains following string :

Id can't be blank<br>Please select Date<br>Image can't be blank<br>

Please help me in this regard.

Answer 1

• htrmlString is not htmlString .

• The selector div.modal-body:first-child will not match any element because div.modal-body is not the first-child of its container. As far as I can see, you only have one .modal-body then you can probably remove the :first-child pseudo selector.

  Try this: $(htmlString).insertBefore('div.modal-body'); .

As per your comment:

If you need to insert the content before the form in the modal, try this:

$(htmlString).insertBefore('div.modal-body #request_form');