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

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

element.innerHTML和appendChild有什么区别

2016-06-21 17:51:21 1820 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

回答

在马尔可夫决策过程(MDPs)中,Environment通常代表什么意思?

2022-10-24 18:06:59 579浏览量 回答数 1

1

回答

Element 复用含义是什么?

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

1

回答

.String args[]里面的字符串组有什么含义呀?

2022-04-02 22:07:02 360浏览量 回答数 1

1

回答

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

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

1

回答

#React Element和Component有什么区别?

2020-05-07 15:26:14 1362浏览量 回答数 1

1

回答

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

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

1

回答

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

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

1

回答

Android webview的edittext

2016-06-16 09:53:11 2351浏览量 回答数 1

1

回答

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

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

4

回答

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

2015-04-07 23:06:52 4253浏览量 回答数 4
+关注
杨冬芳
IT从业
文章
问答
问答排行榜
最热
最新
相关电子书
更多
《零基础HTML入门教程》
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载