使用Javascript或Jquery附加HTML

Question

我正在尝试制作一个这样的多页面模式（最后一个按钮）： https : //www.ngzhian.com/multi-step-modal/

但是运行脚本时我只会得到这个html。 我在这里想念什么？ 我没有任何错误。

 var testCaseNames = ['test', 'test2']; //Modal var testCaseNames = ['test', 'test2']; //Modal var modal = '<form class="modal multi-step" id="creationModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">'; //Progress modal += '<div class="m-progress"><div class="m-progress-bar-wrapper"><div class="m-progress-bar"></div><div class="m-progress-stats"><span class="m-progress-current"></span>/<span class="m-progress-total"></span></div><div class="m-progress-complete">Completed</div></div>'; $.each(testCaseNames, function(key, value) { //Headers $('.modal-header').html('<h4 class="modal-title step-' + key + ' data-step="' + key + '"</h4>'); //Body modal += '<div class="modal-body step-' + key + '" data-step="' + key + '">' + value + '</div>'; // //Footer Buttons modal += '<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>'; modal += '</div></div></form>'; }); $('#modalDiv').empty().html(modal); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="modalDiv"> <form class="modal multi-step in" id="creationModal" style="display: block; padding-right: 17px;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title step-0" data-step="0"> </h4></div> </div> </div> </form> </div> 

Answer 1

在同一函数中多次更改元素的innerHTML时会发生错误。 尝试一次调用.html() ，就像您在此行进行的操作$('#modalDiv').empty().html(modal);

代替这一行$('.modal-header').html('...'); ，请继续在modal变量中添加html文本。