这里所说的动态插入，是指用JS的append()方式追加元素内容，而不是静态写在HTML里面。
为什么会用到这种方式呢？比如登录框。有些网站在大部分页面都有登录按钮，如果是用Bootstrap的模态框调用的话，常规方式都是写在HTML里面，这就不太方便后期修改，因为你一旦要修改就要动到很多个页面！
这里也不多说什么了，
先看效果图：
这里用到的JQ版本是3.5.1，Bootstrap版本是4.6.1，先来看代码：
var loginModal = " <div class=\"modal fade\" id=\"loginModal\" tabindex=\"-1\" aria-hidden=\"true\">\n";
loginModal += " <div class=\"modal-dialog modal-dialog-centered\">\n";
loginModal += " <div class=\"modal-content\">\n";
loginModal += " <div class=\"modal-header\">\n";
loginModal += " <h5 class=\"modal-title text-info\">会员登录</h5>\n";
loginModal += " <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"关闭\">\n";
loginModal += " <span aria-hidden=\"true\">×</span>\n";
loginModal += " </button>\n";
loginModal += " </div>\n";
loginModal += " <div class=\"modal-body px-4\">\n";
loginModal += " <form onsubmit=\"return false;\">\n";
loginModal += " <div class=\"input-group mb-3\">\n";
loginModal += " <div class=\"input-group-prepend\">\n";
loginModal += " <span class=\"input-group-text\">\n";
loginModal += " <i class=\"fas fa-mobile-alt fa-fw\"></i>\n";
loginModal += " </span>\n";
loginModal += " </div>\n";
loginModal += " <input type=\"number\" class=\"form-control\" placeholder=\"小米运动账号\" id=\"miPhone\">\n";
loginModal += " </div>\n";
loginModal += " <div class=\"input-group mb-3\">\n";
loginModal += " <div class=\"input-group-prepend\">\n";
loginModal += " <span class=\"input-group-text\">\n";
loginModal += " <i class=\"fas fa-lock fa-fw\"></i>\n";
loginModal += " </span>\n";
loginModal += " </div>\n";
loginModal += " <input type=\"password\" class=\"form-control\" placeholder=\"小米运动密码\" id=\"miPassword\">\n";
loginModal += " </div>\n";
loginModal += " <div class=\"custom-control custom-switch\">\n";
loginModal += " <input type=\"checkbox\" class=\"custom-control-input\" id=\"loginRemember\">\n";
loginModal += " <label class=\"custom-control-label\" for=\"loginRemember\">记住登录信息</label>\n";
loginModal += " </div>\n";
loginModal += " <p class=\"text-danger text-center py-2 mb-2\" id=\"loginTips\"></p>\n";
loginModal += " <div class=\"text-center\">\n";
loginModal += " <input class=\"btn btn-info\" type=\"submit\" id=\"loginSubmit\" value=\"确定登录\">\n";
loginModal += " <input class=\"btn btn-warning\" type=\"button\" id=\"loginClear\" value=\"清除信息\">\n";
loginModal += " </div>\n";
loginModal += " </form>\n";
loginModal += " </div>\n";
loginModal += " </div>\n";
loginModal += " </div>\n";
loginModal += " </div>";
$("#loginBtn").click(function(){
$("body").append(loginModal); //在body标签的最底部加入模态框代码
$('#loginModal').modal({
keyboard: false,
backdrop: 'static'
});
});这样就实现了用append()方式在body标签的最底部追加登录的模态框，但是有一个问题，就是你不能一直不停的往页面里加入登录框，所以要做一些改变：
var loginBox = false; //先设置一个状态为false
$("#loginBtn, .login_btn").click(function(){
if(loginBox == false){ //判断状态为false时追加
$("body").append(loginModal); //在body标签的最底部加入模态框代码
loginBox = true; //追加后设置状态为true
}
$('#loginModal').modal({
keyboard: false,
backdrop: 'static'
});
});这样就解决了，然后你会遇到新的问题，就是这时候你用$("#loginSubmit").click()绑定点击事件的时候，无效~
这时候就得换一个思路了，因为登录模态框的内容是后面追加进去的，所以不能直接使用$("#loginSubmit").click()这种方式去绑定，可以用下面的方式：
// append()追加页面之后只能用on，提交登录信息
$('body').on('click','#loginSubmit',function(){
var tips = $("#loginTips");
tips.html("");
var phone = $.trim($("#miPhone").val());
var password = $.trim($("#miPassword").val());
if(!/^1\d{10}$/.test(phone)){
tips.html("请输入正确的账号");
$("#miPhone").focus();
return false;
}else if(password.length < 6){
tips.html("密码不能少于6位");
$("#miPassword").focus();
return false;
}else{
$.ajax({
method: 'post',
url: "/login",
dataType: "json",
data: {phone:phone,password:password},
success: function (res) {
if(res.code==200){
location.reload();
}else{
tips.html(res.msg);
return false;
}
},
error: function (){
tips.html("网络异常");
return false;
}
});
}
});至此，就完美解决了！可以把以上代码放进一个公用的JS文件就可以在每个页面调用了~
案例网址：
