jQuery不会在IE中“获取”容器中的内容吗？

Question

我有这样的股利：

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

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

</div>

然后用jQuery我这样做：

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

（我需要格式化的div并在以后使用，所以我用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中丢失内容...这是不合逻辑的，因为我没有存储对ref的引用集合，但我要存储集合本身...

另一件事，似乎“看到”了以后应该发生的事情并改变了行为：

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('');

（那不是真正的代码，它更复杂，我发布了“逻辑”函数）

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的错误。

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