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 何时使用? 的相关文章

  • 有没有办法从 PhantomJS 的键盘读取用户输入?

    我使用 PhantomJS 登录网站 必须手动输入验证码 如何将验证码图像保存到磁盘 然后在 PhantomJS 控制台中手动输入验证码 我遇到了同样的问题 只需将系统模块与 page render 和一些传递给 page evaluate
  • 禁用外部点击时关闭模式

    我正在制作一些使用模式的博客物质化 但我的模态 onclick 外部和错误数据有问题 这是我的代码 main js function changepassword var user userlog val var content conte
  • 将值设置为输入字段时,西班牙语文本无法正确显示

    我正在尝试将西班牙语文本设置到输入字段 但它似乎没有正确显示 但是 如果相同的文本位于 div 内部或已设置为输入字段的值 则该文本可以正常显示 HTML div Cuenta de Ahorros Persona F iacute sic
  • JavaScript CSV 验证

    如何检查文本框中的逗号分隔值并在未找到时发出警报 如果有的话 里面应该有字符 比如A B C D function validate validate text box
  • 为什么 IE9+ 上的网络浏览器不支持 document.createEvent 以及如何修复它?

    我使用的是 Windows 8 Internet Explorer 10 Visual Studio 2013 这是 JavaScript 代码 function simulate element eventName var options
  • 如何使用标准 JavaScript 在 CSS 转换结束后立即重新启动它?

    我构建了一种密码生成器 只要倒计时到期 它就会显示新密码 不幸的是 我只设法弄清楚如何运行我的代码一次 倒计时由一个简单的 CSS 过渡组成 我想保留它 因为它比我的其他尝试平滑得多 其中我尝试使用 JavaScript 重复更新宽度 va
  • 获取 CRM 2011 中功能区按钮的 ID

    我创建了一个 JavaScript 我想在其中隐藏功能区Reactivate Lead按钮取决于某些条件 我通过在表单上按 F12 获得了按钮的 ID 即lead NoRelationship Form Mscrm Form lead Re
  • Javascript:使用 IIFE 和块语句之间的区别

    IIFE主要用于封装作用域 function let myVar 10 not global 但为什么不直接使用块语句呢 let myVar 10 also not global 除了范围封装之外 进一步使用 IIFE 是否还有其他好处 块
  • 多次训练brain.js?

    在第一次训练后 如何将新信息 仅新信息 而不是所有信息 因为这会花费太多性能 训练到我的用 Brain js 制作的神经网络 它有点粗糙 但您可以使用以下结构来实现 如果我们加入 2 个训练数据集 旧数据集与新数据集 然后重新训练keepN
  • CryptoJS 使用密码加密 AES,但 PHP 解密需要密钥

    我在用CryptoJS https code google com p crypto js AES加密字符串 function doHash msg msg String msg var passphrase aggourakia var
  • Twitter Bootstrap - 下拉菜单 - 箭头键不适用于 Firefox 中的输入标签

    要求 我想在带有用户名和密码字段的下拉菜单中放置一个登录表单 我可以做到这一点 除了以下问题之外 一切正常 Issue 打字时我无法使用箭头键 上 下 firefox 当输入位于下拉代码之外时 这很有效 这适用于其他浏览器 例如 googl
  • 如何防止输入文本中出现“后重音”

    我相信这是一个简单的问题 但在谷歌上搜索几个小时后我找不到任何答案 也许我无法在搜索中使用正确的单词 P 我有一个 javascript 方法 可以防止用户用数字以外的其他字符填充文本框 如下面的代码所示 它在 KeyDown 事件中使用
  • jquery 中可点击 div 中的按钮

    我有整个 div 您可以单击它来切换该 div 的主要部分 问题是我在该 div 中也有可点击的按钮 当我点击它时 它会执行它应该做的事情 但同时也会切换整个 div 我怎样才能禁用它 Use event stopPropagation 单
  • ES6 静态方法引用 self? [复制]

    这个问题在这里已经有答案了 我有两节课 存储库和用户存储库 我想在 Repository 中定义一个静态方法 该方法在运行时调用 UserRepository 中的静态函数 有什么干净的方法可以做到这一点吗 class Repository
  • 在循环中调用 setTimeout 未按预期工作

    下面的 JavaScript 应该 在我看来 以 0 5 秒的间隔播放一系列音符 但它会将它们全部作为一个同时的和弦来演奏 知道如何修复它吗 function playRecording if notes length gt 0 for v
  • 如何使用 NextJS 使用自托管字体face?

    使用 NextJS 的字体 我已经阅读了有关如何在 NextJS 中使用自托管字体的不同主题 我得到了什么 wait compiling 当我这样做时 font face font family montserrat src url myp
  • 如何使用 jQuery 过滤 DropDownList 中的选项

    我有 2 个 DropDownList 第一个 DropDownList 有 4 个选项 第二个 DropDownList 有 20 个选项 我想要一个选项value 1在第一个 DropDownList 中选择我在第二个 DropDown
  • javascript:完全删除top.location.hash?

    如果我的地址栏中已经有一个哈希值 例如domain com whatever 我打电话 top location hash wathever 被转换为domain com 没有任何内容 是否可以完全删除哈希值 所以没有 left 因为如果我
  • Html5画布最热门的任意形状

    我正在尝试开发可以在画布中渲染图像和文本的程序 我尝试处理画布中图像的点击 但它适用于可矩形图像 我的问题 您是否知道处理单击画布中图像的可见部分 非透明部分 的解决方案或框架 我正在寻找 ActionScript hitTestObjec
  • 使用
    元素作为 JavaScript 代码的输入。这是最好的方法吗?

    各位 显然 我是编码新手 所以最近完成了一些有关 HTML 和 Javascript 的 Lynda 课程后 我的简单 HTML 页面遇到了困难 基本上 我想要的是使用 JavaScript 进行基本计算 让用户使用 HTML 输入两个数字

随机推荐

  • 诊断 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 属性中 通过对我需要的每个元