jjzjj

javascript - "innerHTML += ..."与 "appendChild(txtNode)"

coder 2023-07-04 原文

问题是，比较使用 innerHTML 的连接和将文本节点附加到现有节点。幕后发生了什么？

到目前为止我对此的看法:

  • 我猜两者都会导致 “回流”。
  • 据我所知，后者(附加文本节点)也会导致 DOM 的完全重建(正确吗？他们都在这样做吗？)。
  • 前者似乎还有一些其他令人讨厌的副作用，比如导致之前保存的对子节点的引用指向我正在修改 innerHTML 的节点，不再指向“当前 DOM”/“子节点的正确版本” .相比之下，在附加子项时，引用似乎保持不变。这是为什么？

我希望你们能帮我解决这个问题，谢谢!

最佳答案

后者 (appendChild) 不会导致 DOM 甚至目标中所有元素/节点的完全重建。

前者(设置 innerHTML)确实会导致目标元素内容的完全重建，如果您要追加，则这是不必要的。

通过 innerHTML += content 附加使浏览器遍历元素中的所有节点，构建 HTML 字符串以提供给 JavaScript 层。然后您的代码将文本附加到它并设置 innerHTML，导致浏览器删除目标中的所有旧节点，重新解析所有 HTML，并构建新节点。所以从这个意义上说，它可能效率不高。 (但是，解析 HTML 是浏览器所做的，而且它们的速度确实非常快。)

设置 innerHTML 确实会使对您可能持有的目标元素中的元素的任何引用无效——因为这些元素不再存在，您删除它们然后放入新元素(看起来非常相似)当你设置 innerHTML 时。

简而言之，如果您要追加，我会使用appendChild(或insertAdjacentHTML，见下文)。如果您要替换，在非常有效的情况下，使用 innerHTML 是比通过 DOM API 自己创建树更好的选择(速度是其中的主要因素)。

最后，值得一提的是其他几个备选方案:

  • append是 DOM 的一个相对较新的添加(但有 excellent support 而不是真正过时的浏览器)。它将一个或多个项目附加到元素，其中项目可以是节点、元素或定义节点和元素的 HTML 字符串。与 appendChild 不同，它支持 HTML 字符串和节点，并且还支持多个参数。对于您的用例，它比此列表中的下一个选项更简单:parent.append(htmlString)。
  • insertAdjacentHTML将您作为 HTML 字符串提供的节点和元素插入到元素中或元素旁边。您可以使用它附加到元素: theElement.insertAdjacentHTML("beforeend", "the HTML goes here"); 第一个参数是放置 HTML 的位置；你的选择是:
    • “beforebegin”(在元素之外，就在它前面)
    • "afterbegin"(元素内部，开头)
    • “beforeend”(元素内部，末尾)
    • "afterend"(在元素之外，就在元素之后) 请注意，"afterbegin" 和 "beforeend" 插入元素本身，而 "beforebegin" 和 "afterend" 插入元素的父级。浏览器支持是 basically universal .
  • insertAdjacentText就像 insertAdjacentHTML 一样，只是它插入了一个文本节点(文本不被视为 HTML)。浏览器支持是 basically universal .

关于javascript - "innerHTML += ..."与 "appendChild(txtNode)"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2305654/

amp34codeinnerHTMLinsertAdjacentHTMLjavascriptdom

有关javascript - "innerHTML += ..."与 "appendChild(txtNode)"的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  4. ruby-on-rails - 如何优雅地重启 thin + nginx？ - 2

    我的瘦服务器配置了nginx，我的ROR应用程序正在它们上运行。在我发布代码更新时运行thinrestart会给我的应用程序带来一些停机时间。我试图弄清楚如何优雅地重启正在运行的Thin实例，但找不到好的解决方案。有没有人能做到这一点？ 最佳答案 #Restartjustthethinserverdescribedbythatconfigsudothin-C/etc/thin/mysite.ymlrestartNginx将继续运行并代理请求。如果您将Nginx设置为使用多个上游服务器，例如server{listen80;server

  5. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  6. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  7. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file

  8. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  9. ruby - RVM "ERROR: Unable to checkout branch ."单用户 - 2

    我在新的Debian6VirtualBoxVM上安装RVM时遇到问题。我已经安装了所有需要的包并使用下载了安装脚本(curl-shttps://rvm.beginrescueend.com/install/rvm)>rvm，但以单个用户身份运行时bashrvm我收到以下错误消息:ERROR:Unabletocheckoutbranch.安装在这里停止，并且(据我所知)没有安装RVM的任何文件。如果我以root身份运行脚本(对于多用户安装)，我会收到另一条消息:Successfullycheckedoutbranch''安装程序继续并指示成功，但未添加.rvm目录，甚至在修改我的.bas

  10. ruby - 如何关闭 ruby​​ gem "Spreadsheet?"中的文件 - 2

    下面的代码在我第一次运行它时就可以正常工作:require'rubygems'require'spreadsheet'book=Spreadsheet.open'/Users/me/myruby/Mywks.xls'sheet=book.worksheet0row=sheet.row(1)putsrow[1]book.write'/Users/me/myruby/Mywks.xls'当我再次运行它时，我会收到更多消息，例如:/Library/Ruby/Gems/1.8/gems/spreadsheet-0.6.5.9/lib/spreadsheet/excel/reader.rb:11

随机推荐