javascript - Why I'm not able to dynamically add the HTML to the page using jQuery? -

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 want dynamically add html ajax response -->         <form id="request_form" method="post" class="form-horizontal" action="">         </form>       </div>     </div>   </div> </div> 

in above code want add html code dynamically after

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

using jquery ajax.

for 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 html code want 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 so. getting error in console

referenceerror: htmlstring not defined 

no new html coming in bootstrap modal.

the variable response contains following string :

id can't blank<br>please select date<br>image can't blank<br> 

please me in regard.

• htrmlstring not htmlstring.

• the selector div.modal-body:first-child not match element because div.modal-body not first-child of container. far can see, have 1 .modal-body can remove :first-child pseudo selector.

  try this: $(htmlstring).insertbefore('div.modal-body');.

as per comment:

if need insert content before form in modal, try this:

$(htmlstring).insertbefore('div.modal-body #request_form');