element.innerHTML和appendChild有什么区别 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

element.innerHTML和appendChild有什么区别

如果我现在想往页面里加入一个表格我可能会这样写.

//创建 table
var table = document.createElement("table"); table.border = 1;
table.width = "100%";

//创建 tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

//创建第一行
var row1 = document.createElement("tr");
tbody.appendChild(row1);
var cell1_1 = document.createElement("td"); cell1_1.appendChild(document.createTextNode("Cell 1,1")); row1.appendChild(cell1_1);
var cell2_1 = document.createElement("td"); cell2_1.appendChild(document.createTextNode("Cell 2,1"));
row1.appendChild(cell2_1);

//创建第二行
var row2 = document.createElement("tr"); tbody.appendChild(row2);
var cell1_2 = document.createElement("td");
cell1_2.appendChild(document.createTextNode("Cell 1,2"));
row2.appendChild(cell1_2);
var cell2_2= document.createElement("td");
cell2_2.appendChild(document.createTextNode("Cell 2,2"));
row2.appendChild(cell2_2);

//将表格添加到文档主体中
document.body.appendChild(table);

但如果我用innerHTML仅仅只需要拼接字符串即可?到底用哪种方式好?
请从多角度说明,比如说从性能角度去考虑。

展开
收起
杨冬芳 2016-06-21 17:51:21 1887 0
1 条回答
写回答
取消 提交回答
  • 杨冬芳
    IT从业

    非常不喜欢使用innerHTML,因为使用javascript拼接html和使用java拼接javascript一样丑陋。

    当只插入一次时,createElement能够产生半成品(能添加事件等其他的操作),给浏览器时浏览器需要做的额外的事情比解html析字符串少。
    如果需要大量的插入时,用createElement再appendChild肯定比innerHTML差,但是createDocumentFragment再appendChild会更好。

    另外,这里的文章
    还有测试结果
    都表明了最好不要用innerHTML。

    2019-07-17 19:45:10
    赞同 展开评论 打赏
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载