var template='<div class="m-modal">\
<div class="modal_align"></div>\
<div class="modal_wrap">\
<div class="bk"></div>\
<div class="modal_body">\
<h3>登录网易云课堂</h3>\
<div class="form1">\
<input value="账号">\
</div>\
<div class="form2">\
<input value="密码">\
</div>\
<button class="submit">登录</button>\
</div>\
</div>\
</div>'
var container;
function html2node(str){
container = document.createElement('div');
container.innerHTML = str;
return container.children[0];
}
var _layout=html2node(template);
var show=function(){
var asd=document.getElementById("parent");
asd.appendChild(_layout);
}
container.querySelector('.bk').addEventListener('click', function(event){
_layout.parentNode.removeChild(_layout);
});
在chrome中的调试面板中,为何container只有一个div元素,
根据container.innerHTML = str;这句,应该显示template元素啊?
asd.appendChild(_layout);
这一句把container里面的元素移动到了asd,所以container只剩下外层的div
function html2node(str){
container = document.createElement('div');
container.innerHTML = str;
return container.children[0];//这里干嘛返回children[0]? 直接返回container不就好了么
}