js创建多个元素使用createElement然后appendChild和innerHTML相比哪个更加消耗性能？

Question

其实就是模拟的一个聊天窗口，对话基本是死的，大概20句问答（也就是40句左右），对话框里面有头像和文字，一问一答，底部可以输入，那么是
case 1:使用createElement创建每个对话框，然后appendChild每个对话框到父元素;break;
case 2:始终都是父元素.innerHTML += 对话框拼接字符串呢;break;
两种方案哪个会更加消耗性能吗？

Answer 1

很多的话用innerHTML好点，其实性能相差也不大，但是用createElement好操作点，比如添加事件，改变样式什么的，配合 createDocumentFragment使用，还是推荐createElement吧