innerHTML 与 appendChild 有啥区别？ 求前端解答。

[ren2881971]

背景： 通过js创建table 然后按照bootstrap的样式设置下table。最后在加入div节点中去。

发现用appendChild 将table 加入div节点后 页面样式没有显示
但是用innerHTML 的时候就显示了～。

并且我疑惑的是 我alert出来 table的 html 直接粘贴在页面上还能显示~　为啥ｊｓ构建的就不能显示呢？　求前端解答。　

代码如下：

function buildOpenTask(data)
{   /*
var formId = data.formId;
var formTitle = data.formTitle;
var publicDataElementId = data.publicDataElementId;
var firstNode = data.firstNode;
*/
var childList = data.childList;
var _table = document.createElement("table");
_table.className = 'table table-condensed';
for (var i = 0; i < childList.length; i++) {
    var _tr = document.createElement("tr");
    var _td_title = document.createElement("td");
    var _td_input = document.createElement("td");
    _td_title.className = 'info';   
    _td_title.innerHTML = childList[i].dataElementAlias;
    //alert(childList[i].dataElementAlias);

    _tr.appendChild(_td_title);
    _tr.appendChild(_td_input);
    _table.appendChild(_tr);
}
//document.getElementById("openTask").appendChild(_table.);
document.getElementById("openTask").innerHTML = _table.outerHTML;
}

[otakustay]

我怀疑可能是你少了tbody这个元素的关系，用innerHTML的时候会走HTML的解析器，解析器会自动补全tbody，而用js则会严格遵循你的结构吧……

[Biwood]

楼上说的对，用 DOM 操作的方式操作 table 结构会有问题，我遇到过类似问题，table 结构在浏览器中的解析方式跟你想象的有差别

[learnshare]

@otakustay +1

浏览器有许多类似的自动补全和填充动作，这就要求你按照标准的风格来写，不要丢掉 tbody

[ren2881971]

沙发说得对！！
我对比的时候确实发现 debug模式下的 table里有tbody，而 把table ourerHTML alert出来没有tbody！

3q！ 已付银币！