createElement() 与innerHTML 何时使用?

2024-04-25

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

从那里我需要将其组成 HTML,以便通过两种方式之一向用户显示。

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

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

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

在某些情况下可能会更快

有人可以建立一个基本情况,说明 createElement() 方法何时更快,为什么?

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

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

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


研究/链接

createElement 相对于innerHTML 的优点? https://stackoverflow.com/questions/2946656/advantages-of-createelement-over-innerhtml

JavaScript:使用innerHTML 或(大量)createElement 调用来添加复杂的div 结构是否更好? https://stackoverflow.com/questions/737307/javascript-is-it-better-to-use-innerhtml-or-lots-of-createelement-calls-to-ad


添加到 DOMn时间需要n比单次添加到 DOM 的时间多出好几倍。 (:P)

这是我个人遵循的逻辑。

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

这有点类似于将 BATCH 操作与“一对一”进行比较……只要您可以因式分解,就应该这样做!

编辑:阅读评论我了解到有一个功能(DOM DocumentFragment)可以让我们节省此类开销,同时利用 DOM 封装。这样的话,如果性能真的相当的话,我绝对不会怀疑并选择DOM选项。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

createElement() 与innerHTML 何时使用? 的相关文章

  • 如何检测浏览器是否支持自定义元素

    我正在查看 Modernizr 它应该有助于功能检测 这应该可以帮助确定您的网站是否与给定的 Web 浏览器兼容 但我没有看到任何表明我可以使用它来检测自定义 HTML 的内容我们在内容中创建和定义的元素 如果不是 Modernizr 我如
  • JavaScript onTouch 不工作

    谁能告诉我为什么这个 onTouch 处理程序没有触发 var myDiv document getElementById existingContent var myButton a href log out a myDiv append
  • 不和谐机器人 |不和谐.js |类型错误:无法读取未定义的属性“长度”

    我正在制作一个 Discord 机器人 并且正在使用 CodeLyon 的视频作为参考 该错误位于我的 message js 文件中 该文件包含以下内容 require dotenv config create cooldowns map
  • 在 Vue.js 中从父组件执行子方法

    目前 我有一个 Vue js 组件 其中包含其他组件的列表 我知道使用 vue 的常见方式是将数据传递给孩子 并从孩子向父母发出事件 但是 在这种情况下 我想在子组件中的按钮出现时执行子组件中的方法 parent被点击 哪种方法最好 一种建
  • 使用 useReducers 调度函数发送多个操作?

    使用时是否可以通过调度函数发送多个动作useReducer挂钩反应 我尝试向它传递一组操作 但这会引发未处理的运行时异常 明确地说 通常会有一个初始状态对象和一个减速器 如下所示 const initialState message1 nu
  • 检查 JavaScript 字符串是否为 URL

    JavaScript 有没有办法检查字符串是否是 URL 正则表达式被排除在外 因为 URL 很可能是这样写的stackoverflow 也就是说它可能没有 com www or http 如果你想检查一个字符串是否是有效的 HTTP UR
  • 如何防止 Iframe 在与浏览器交互后弄乱浏览器的历史记录?

    因此 就我而言 我使用 Iframe 将 Grafana 附加到我的页面 这为我提供了漂亮且易于使用的图表 可以注意到 每次在图表上进行放大或缩小 使用鼠标单击 交互后 Grafana 的 Iframe 都会在我的 Angular 页面上触
  • 使用 Angular 下载具有动态 src 的脚本

    Angular 提供了通过动态名称动态加载模板的方法ng include 该部分中的内联 JS 和 CSS 可以正常加载 但没有一个好的方法来下载带有动态 url 的脚本 我们需要下载脚本 相对于调用它们的 html 部分的路径 即我们有一
  • Node.js:如何在检索数据(块)时关闭响应/请求

    我正在用 node js 构建一个应用程序 它加载多个页面并分析内容 因为 node js 发送块 所以我可以分析这些块 如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • 音频 blob 的 URL.createObjectURL 在 Firefox 中给出 TypeError

    我正在尝试从创建的音频 blob 创建对象 URLgetUserMedia 该代码在 Chrome 中可以运行 但在 Firefox 中存在问题 错误 当我打电话时stopAudioRecorder 它停在audio player src
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • Babel 7 Jest Core JS“TypeError:wks不是函数”

    将我的项目升级到 Babel 7 后 通过 Jest 运行测试会抛出以下错误 测试在 Babel 6 中运行没有任何问题 但在 Babel 7 中失败并出现以下错误 TypeError wks is not a function at Ob
  • 如何使用tampermonkey模拟react应用程序中的点击?

    我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的点击 不幸的是 由于 React 有自己的影子 DOM 所以天真的方法使用document querySelector 不工作 我遇到了一些需要修改 React 组件本
  • 有没有办法阻止 prettier / prettier-now 将函数参数分解为新行

    当使用 prettier prettier now 在保存时进行格式化时 当一个函数包装另一个函数时 它会中断到一个新行 我想知道是否有办法阻止这种行为 例如 期望的输出 app get campgrounds id catchAsync
  • 条件在反应本机生产中失败,但在开发中有效

    我创建了一个反应本机应用程序 我需要通过它进行比较 如果属实 就会执行死刑 问题是 该条件适用于 React Native 开发模式 而不适用于 React Native 生产版本 我使用 firebase 作为数据库 也使用 redux
  • Safari 支持 JavaScript window.onerror 吗?

    我有一个附加到 window onerror 的函数 window onerror function errorMsg url line window alert asdf 这在 firefox chrome 和 IE 中工作正常 但在 s
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构

随机推荐

  • 诊断 R 包构建错误:pdfLatex 不可用

    我正在尝试构建一个包R 我制作了骨架 并运行了命令R CMD check package1 我收到一个错误描述here https stackoverflow com questions 10819959 diagnosing r pack
  • 迁移到 Jboss 7.0 AS 后 Firefox 和 IE 中的 ViewExpiredException

    我们的 JSF 2 0 Richfaces 4 0 应用程序在 Jboss 6 0 上运行得非常好 我们正在尝试将其迁移到 Jboss 7 0 AS 对于我们点击页面上的任何链接 我们在 Firefox 和 IE 中遇到 ViewExpir
  • 如何使用 boost::spirit::qi 解析行尾?

    不应该是一个简单的eol http www boost org doc libs 1 42 0 libs spirit doc html spirit qi quick reference qi parsers auxiliary html
  • ASP NET Core 2 找不到包“Projectname.Model”的编译库位置

    在我的解决方案中 我有两个项目 其中之一是web项目 另一个是Model项目 您可以在下面看到我的解决方案结构 现在 当我运行应用程序时 出现以下错误 InvalidOperationException 找不到包 ContosoUniver
  • 如何在 GWT 中取消转义字符串

    我使用了 SafeHtmlUtils htmlEscape text 并且我想使用相反的功能 你能告诉我 gwt 中是否有像 unescapeHtml 这样的函数 如果 并且仅当 您可以相信文本不包含恶意内容 您可以使用 import co
  • 客户端验证后 RegisterOnSubmitStatement

    我需要在提交 Web 表单时但在客户端验证发生之后在流程中插入一些 Javascript RegisterOnSubmitStatement 似乎将 JavaScript 放在验证之前 有人知道如何让它渲染后吗 找到解决方案 在网络控件中
  • declarative_authorization 和命名空间

    您知道 declarative authorization 是否可以控制对命名空间资源的访问吗 我尝试过类似的东西 has permission on admin users to gt index show new create edit
  • R和matlab中的qr函数

    我有一个关于将 matlab 函数转换为 R 的问题 我希望有人能提供帮助 matlab 和 R 中使用的标准 QR 分解称为 qr 据我了解 用两种语言执行 qr 分解的标准方法是 Matlab Q R qr A 满足QR A R z l
  • PDOStatement 到 JSON [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我将如何转换PDOStatement到 JSON 我需要 jsonifyPDO FETCH OBJ json encode没有能力 j
  • 如何创建 Delphi Android 应用程序 APK 来包含文件

    如何将文件和 或包含 Android 应用程序 APK 文件的文件的文件夹包含在内 Delphi 运行过程会擦除 Assets 目录的内容 并且我放置在那里的文件 文件夹不包含在 APK 包中 我假设您必须手动将 System Startu
  • 如何在 Python 中使用 tkinter 选择目录并存储位置

    我正在创建一个带有浏览按钮的 GUI 我只想返回路径 我一直在寻找使用如下代码的解决方案 Tkinter Button subframe text Browse command self loadtemplate width 10 pack
  • 使用candlestick_ohlc显示csv

    我尝试用熊猫做第一步 经过几个成功的步骤后 我坚持执行以下任务 使用 OHLC 条显示数据 我从 Google Finance 下载了 Apple 股票的数据并将其存储到 csv 文件中 经过大量搜索 我编写了以下代码 import pan
  • 与 Socket.io 保持连接

    我正在尝试使用 asterisk websocket 连接socket io 客户端 https github com socketio socket io client socket io connect url transports w
  • 根据laravel中选定的省份获取城市列表

    如何获取基于所选省份的城市列表 我的控制器 public function index province RajaOngkir Provinsi gt all city RajaOngkir kota gt all return view
  • Intl.DateTimeFormat 给出 1847 年或以下年份的奇怪结果

    为什么我选择1848以下的年份 这种格式的结果是May 10 我有一种感觉 这可能与时区有关 如果是这样 我怎样才能避免这种情况 因为我将从 ISO 日期字符串 没有时间 创建一个日期对象 如下所示 YYYY MM DD 在 Chrome
  • 是否可以以编程方式指定

    有什么方法可以在活动 l 中以编程方式指定 in 的意思吗 因为在 Google Play 中 当用户尝试安装该应用程序时 它表示 Android 应用程序与您的 Kindle Fire 平板电脑设备不兼容 在我的应用程序中 我们使用的是地
  • 将 AutoFac 设置为默认使用 PropertiesAutowired(true) 吗?

    有没有办法我可以将 AutoFac 设置为使用 PropertiesAutowired true 作为所有注册类型的默认值 即我不想一直使用 Properties Autowired true var builder new Contain
  • 如何将数据从 C# 推送到 ZeroMQ 并从 Node.JS 拉取,反之亦然?

    Scenario 我正在尝试发送数据 例如String类型 通过 ZeroMQ 从 C 控制台应用程序到 Node JS 服务器 信息 分别对 C 使用 clrzmq 对 C 和 Node JS 使用 ZeroMQ 库 我有能力执行推拉 h
  • Python - PIP 安装故障排除 - PermissionError: [WinError 5] 访问被拒绝

    使用 PIP 安装新软件包甚至将 pip 本身升级到最新版本时出现以下错误 我正在 Windows 8 1 机器上使用 Python 3 4 运行 pip 该消息告诉我我没有文件的管理权限 我的帐户是管理员帐户 我很感激任何关于如何解决这个
  • createElement() 与innerHTML 何时使用?

    我在sql表中有一些数据 我通过 JSON 将其发送到我的 JavaScript 从那里我需要将其组成 HTML 以便通过两种方式之一向用户显示 通过编写 html 字符串并插入到持有元素的 innerHTML 属性中 通过对我需要的每个元