innerHTML 与 appendChild 有啥区别？ 求前端解答。
ren2881971 · ren2881971 · 2015-06-30 16:29:17 +08:00 · 2697 次点击这是一个创建于 3436 天前的主题，其中的信息可能已经有所发展或是发生改变。
背景： 通过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;
}
 |
1
otakustay 2015-06-30 17:00:05 +08:00  1
我怀疑可能是你少了tbody这个元素的关系，用innerHTML的时候会走HTML的解析器，解析器会自动补全tbody，而用js则会严格遵循你的结构吧……
|
 |
2
Biwood 2015-06-30 17:19:35 +08:00
楼上说的对，用 DOM 操作的方式操作 table 结构会有问题，我遇到过类似问题，table 结构在浏览器中的解析方式跟你想象的有差别
|
 |
3
learnshare 2015-06-30 17:33:59 +08:00
|
 |
4
ren2881971 OP 沙发说得对！！
我对比的时候确实发现 debug模式下的 table里有tbody，而 把table ourerHTML alert出来没有tbody！ 3q！ 已付银币！ |
Select Language