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

（我需要使用格式化的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>

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

由于

更新

这似乎令人难以置信，虽然我将div存储在VAR中，如果我不用$（）克隆它们.clone（）它们会松开IE中的内容......这是不符合逻辑的因为我没有将参考文献存储到一个集合中，但是我自己存储了这个集合...

另一件事，似乎＆＃34;看＆＃34;以后会发生什么并改变行为：

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

（那不是真正的代码，它更复杂，我发布了＆＃34;逻辑＆＃34;功能）

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

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

jQuery not＆＃34; take＆＃34; IE中容器内的内容？

3 个答案: