jjzjj

javascript - Internet Explorer 9/10 中是否存在带有 innerHTML =""的错误？

coder 2024-07-25 原文

我经常使用下面的代码来清除元素的内容:

div.innerHTML = "";

但我在 Internet Explorer 上发现了一个奇怪的行为。似乎 div 的所有 child 也都删除了自己的 child !如果我保留对上面 div 的子项的引用，在执行 div.innerHTML = ""; 之后，子项的文本节点将不再在子项中。

以下代码是此行为的证明(http://jsfiddle.net/Laudp273/):

function createText() {
    var e = document.createElement("div");
    e.textContent = "Hello World!";
    return e;
}

var mrk = document.createElement("div");
mrk.appendChild(createText());
mrk.style.border = "4px solid yellow";

var container = null;

function addDiv() {
    if (container) {
        container.innerHTML = "";
    }
    var e = document.createElement("div");
    e.appendChild(mrk);
    container = e;
    document.body.appendChild(e);
}

var btn = document.createElement("button");
btn.textContent = "Add marker";
btn.addEventListener(
    "click",
    function() {
        addDiv();
    },
    false
);
document.body.appendChild(btn);

如果您点击“添加标记”按钮两次，您将看到一个空的黄色矩形，而不是带有文本“Hello wordl!”的矩形。

这是 Firefox 或 Google Chrome 未使用的错误或规范吗？

最佳答案

这是非常有趣的行为，在 IE8 和 IE11 上也会发生。这是一个相当简单的测试/证明:

var span = document.createElement('span');
span.appendChild(document.createTextNode("This disappears on IE"));

var div = document.createElement('div');
div.appendChild(span);
snippet.log("[before] span's childNodes.length: " + span.childNodes.length);
div.innerHTML = "";
snippet.log("[after] span's childNodes.length: " + span.childNodes.length);
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

将 div 的 innerHTML 设置为 "" 后，我们保留的 span 引用丢失了它的子文本节点在 IE 上，而不是在其他浏览器上。

We're not the only ones to notice this and find it, um, inappropriate.

也不一定是""，任何新内容都会导致错误:

var span = document.createElement('span');
span.appendChild(document.createTextNode("This disappears on IE"));

var div = document.createElement('div');
div.appendChild(span);
snippet.log("[before] span's childNodes.length: " + span.childNodes.length);
div.innerHTML = "New content"; // <== Not ""
snippet.log("[after] span's childNodes.length: " + span.childNodes.length);
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

What little we have in the way of a spec for innerHTML对于旧内容应该发生什么是相当模糊的，但肯定这是错误的，即使微软 did 发明了 innerHTML。

而通过 removeNode 删除节点不会导致此行为:

var span = document.createElement('span');
span.appendChild(document.createTextNode("This disappears on IE"));

var div = document.createElement('div');
div.appendChild(span);
snippet.log("[before] span's childNodes.length: " + span.childNodes.length);
while (div.firstChild) {
  div.removeChild(div.firstChild);
}
snippet.log("[after] span's childNodes.length: " + span.childNodes.length);
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

感叹

关于javascript - Internet Explorer 9/10 中是否存在带有 innerHTML =""的错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28741528/

javascriptinnerHTMLcodesection34internet-explorer-9internet-explorer-10

有关javascript - Internet Explorer 9/10 中是否存在带有 innerHTML =""的错误？的更多相关文章

  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-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

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

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

  5. ruby - 检查数组是否在增加 - 2

    这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加？这是我的解决方案，但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife

  6. 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

  7. ruby - 检查字符串是否包含散列中的任何键并返回它包含的键的值 - 2

    我有一个包含多个键的散列和一个字符串，该字符串不包含散列中的任何键或包含一个键。h={"k1"=>"v1","k2"=>"v2","k3"=>"v3"}s="thisisanexamplestringthatmightoccurwithakeysomewhereinthestringk1(withspecialcharacterslike(^&*$#@!^&&*))"检查s是否包含h中的任何键的最佳方法是什么，如果包含，则返回它包含的键的值？例如，对于上面的h和s的例子，输出应该是v1。编辑:只有字符串是用户定义的。哈希将始终相同。 最佳答案

  8. 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

  9. ruby-on-rails - Ruby 检查日期时间是否为 iso8601 并保存 - 2

    我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby​​是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。 最佳答案 我不太明白你的问题。我假设您想检查

  10. 使用 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

随机推荐