为什么我不能使用 jQuery 将 HTML 动态添加到页面中？

Question

我已经关注了 Bootstrap Modal 对话框的 HTML 代码：

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

在上面的代码中我想在

之后动态添加HTML代码

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

使用 jQuery AJAX。

为此，我尝试了以下代码：

$('#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();
});

但我做不到。在控制台中出现错误

ReferenceError: htmlString is not defined

Bootstrap 模式中没有新的 HTML。

变量response 包含以下字符串：

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

请在这方面帮助我。

Answer 1

• htrmlString不是htmlString。

• 选择器div.modal-body:first-child 不会匹配任何元素，因为div.modal-body 不是其容器的第一个子元素。据我所知，您只有一个.modal-body，那么您可能可以删除:first-child 伪选择器。

  试试这个：$(htmlString).insertBefore('div.modal-body');。

根据您的评论：

如果你需要在模态框的表单之前插入内容，试试这个：

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