javascript - createElement() 与 innerHTML 何时使用?

标签 javascript

我在 sql 表中有一些数据。我通过 JSON 将它发送到我的 JavaScript。

从那里我需要将它组合成 HTML,以便通过 2 种方式之一显示给用户。

  • 通过编写 html 字符串并插入到持有元素的 .innerHTML 属性中
  • 通过为我需要的每个元素使用 createElment() 并直接附加到 DOM 中

以下两个问题都没有给出可量化的答案。

从第一个链接的第一个答案开始,第三个原因(前两个原因不适用于我的环境)

Could be faster in some cases

有人可以确定 createElement() 方法何时更快以及为什么更快的基本情况吗?

这样一来,人们就可以根据他们的环境对使用哪个做出有根据的猜测。

就我而言,我不担心保留现有的 DOM 结构或事件监听器。只是效率(速度)。

关于我提供的第二个链接,我没有使用图书馆。但它是为那些可能的人准备的。


研究/链接

Advantages of createElement over innerHTML?

JavaScript: Is it better to use innerHTML or (lots of) createElement calls to add a complex div structure?

最佳答案

添加到 DOM n 次比添加到 DOM 一次花费的时间多 n 倍。 (:P)

这是我个人遵循的逻辑。

因此,例如,当它要创建一个 SELECT 元素并向其添加几个选项时,我更喜欢使用 innerHTML 一次添加所有选项,而不是使用 createElement 调用 n 次。

这有点类似于将 BATCH 操作与“一对一”进行比较......只要你可以分解,你就应该!

编辑:阅读评论后,我了解到有一项功能 (DOM DocumentFragment) 可以让我们节省此类开销,同时利用 DOM 封装。在这种情况下,如果性能真的具有可比性,我肯定不会怀疑并选择 DOM 选项。

关于javascript - createElement() 与 innerHTML 何时使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10820079/

相关文章:

javascript - 如何将表行的值传递到模态变量中

javascript - 代表 PDF 到 blob 的 Base64 - JavaScript

javascript - 使用 jQuery 和插件使表格可排序

javascript - 具有 .data 和 html5 数据属性的 jQuery 自定义函数

javascript - 使用 RegExp 函数 javascript 替换包含反斜杠的子字符串

javascript - 当任何国王(卡片 13)被选中时,我如何让我的游戏结束?

javascript - 如何使 jQuery POST 函数打开新页面?

javascript - 重置循环内的变量

javascript - 获取触摸事件的长度

javascript - 如何在动态方法中更改列的宽度