jQuery 不是"takes" IE 容器里面的内容？

Question

我有一个 div 这样的：

<div class='x' data-x='xxx'>

<div> bla bla </div>
<a> blabla </a>
<!-- other stuff -->

</div>

然后 jquery 我这样做：

var divs= $('#wrapper .x');
$('#wrapper').html('');

(我需要把格式化后的divs拿来以后用，所以我用php创建它们，用JS删除它们以后使用)

如果我记录 var divs[0] whit chrome 没问题，我会看到整个 div（容器 + 内容）：

<div class='x' data-x='xxx'>

<div> bla bla </div>
<a> blabla </a>
<!-- other stuff -->

</div>

但是如果我在 IE 中登录（使用 IE 11），我只会得到容器：

<div class='x' data-x='xxx'></div>

这是为什么？我该如何解决这个问题？

谢谢

更新：

这似乎令人难以置信，虽然我将 divs 存储在 VAR 中，但如果我不使用 $().clone() 克隆它们，它们就会丢失 IE 中的内容...而事实并非如此合乎逻辑，因为我没有存储集合的引用，而是存储集合本身...

另一件事，似乎 "see" 以后应该发生什么并改变行为：

var divs= $('#wrapper .x');
console.log(divs[0]); //WORK

var divs= $('#wrapper .x');
console.log(divs[0]); //NOT WORK <-- why?!
$('#wrapper').html(''); <-- this should execute later!

var divs= $('#wrapper .x').clone();
console.log(divs[0]); //WORK
$('#wrapper').html('');

（这不是真正的代码，它更复杂，我已经发布了 "logical" 函数）

Answer 1

这似乎是一个错误，或者至少与 IE11 版本的 .innerHTML 属性有所不同。它维护对您仍然可以引用的节点的引用，但不是它们的子节点。

您可以通过替换此类行来解决此问题：

$('#wrapper').html('');
//with:
$('#wrapper > *').remove();

这在我尝试时似乎保留了文字。

Answer 2

如果您将元素的内部 HTML 设置为空，则该元素的内容会发生什么变化是任何人的猜测。如果浏览器要递归向下遍历并删除节点，这就是它要做的。

如果您想在清空它们的父级之前保留您选择的一些节点，您可以使用 .remove():

提前将它们从 DOM 中分离出来

var divs = $('#wrapper .x');
divs.remove();                 // <--- here
$('#wrapper').html('');
console.log(divs[0]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapper">
  <div class='x' data-x='xxx'>

    <div>bla bla</div>
    <a> blabla </a>
    <!-- other stuff -->

  </div>
</div>

至于为什么这不像你期望的那样工作：

var divs= $('#wrapper .x');
console.log(divs[0]); //NOT WORK <-- why?!
$('#wrapper').html(''); <-- this should execute later

您不能相信 console.log() 总是在对象执行时显示对象的值。如果该对象的值在 console.log() 运行后发生变化，控制台可以很好地更改以显示新值。

Answer 3

这是IE实现innerHTML的一个bug。

要在保留相应节点及其内容的同时删除元素的内容，请使用本机 textContent = '' 或 jQuery 的 text('')。

jQuery 不是"takes" IE 容器里面的内容？

jQuery not "takes" the content inside the container in IE?

html

javascript

jquery

internet-explorer

internet-explorer-11