为什么动态生成的元素会多出一个文本节点

Question

如题，我动态生成了一串的Ul和li，然后用childNodes获取后莫名多了一个文本节点，如图

相关代码：

creatli(n){

var li = document.createElement('li');
li.className = n;
return li;

}
creatul(n){

var ul = document.createElement('ul');
ul.className = n;
return ul;

}
creatr(){

var con = this.con.nativeElement;
var row = this.creatul('row');
var arr = this.creatcell();
con.appendChild(row);
      for (var i = 0; i < 4; i++) {
        row.appendChild(this.creatli(arr[i]));
    }

    if (con.firstChild == null) {
        con.appendChild(row);
    } else {
        con.insertBefore(row, con.firstChild);
    }

}
creatcell(){

var temp=['cell','cell','cell','cell'];
var i = Math.floor(Math.random()*4);
temp[i]='cell black';
return temp;

}
init(){

for(var i = 0;i < 4;i++){
  this.creatr();
}
}

Answer 1

容器内部有换行符和空格，识别成一个node

Answer 2

文本节点就是 <li></li> 中间部分（文字部分，虽然这里没有文字，但是dom还是会将其解析问一个文本节点），这个应该是无法避免的，应该也不影响你的程序