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

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

element.innerHTML和appendChild有什么区别

2016-06-21 17:51:21 1770 1

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

//创建 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仅仅只需要拼接字符串即可?到底用哪种方式好?
请从多角度说明,比如说从性能角度去考虑。

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:45:10

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

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

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

    0 0
相关问答

1

回答

Element 复用含义是什么?

2022-05-08 11:19:22 96浏览量 回答数 1

1

回答

在嵌套使用if语句时,C语言规定else总是什么?

2022-03-29 16:40:56 222浏览量 回答数 1

1

回答

htable API 有没有线程安全问题,在程序中是单例还是多例?

2021-12-05 17:31:33 128浏览量 回答数 1

1

回答

<jsp:element> 、 <jsp:attribute>、 <jsp:body>的作用是什么?

2021-10-29 23:01:02 126浏览量 回答数 1

1

回答

web前端主流框架Element-UI是什么?

2021-11-06 16:06:24 257浏览量 回答数 1

1

回答

弹性伸缩生命周期挂钩有哪些API?

2020-03-24 19:47:13 539浏览量 回答数 1

1

回答

mqtt发起订阅subscribe第一条信息时就出现超时;subcribe返回IOTX_MQTT_EVENT_SUBCRIBE_NACK;

2018-11-30 14:02:18 2040浏览量 回答数 1

1

回答

关于Android中用首字母排序的listview中的item的滑动监听与listview的上下滑动冲突

2016-03-16 11:45:44 2183浏览量 回答数 1

1

回答

关于mysql 默认err日志及mysqld.log的问题

2016-02-15 16:19:41 5161浏览量 回答数 1

4

回答

我两台ECS,一个是WEB程序,一个是MYSQL

2015-04-07 23:06:52 4203浏览量 回答数 4
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载