还是js的问题啊

Question

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元素啊？

Answer 1

function html2node(str){
    container = document.createElement('div');
    container.innerHTML = str;
    return container.children[0];//这里干嘛返回children[0]? 直接返回container不就好了么
}

Answer 2

asd.appendChild(_layout);
这一句把container里面的元素移动到了asd，所以container只剩下外层的div