Question

我无法在jQuery中使用document.getElementById。

<div id="div1" style="height:200px;width:300px;border:1px solid black;background-color:yellow;">
  This is some text in the div.
  <p>This is a paragraph in the div.</p>
  <p>This is another paragraph in the div.</p>
  <h1 id="apple" style="display:none;">This is another paragraph in the div.</h1>
</div>
<br>

<button>Empty the div element</button>

这有效 -

$(document).ready(function(){
    $("button").click(function(){
         $("#div1").empty();

    });
});

即使这样也可以 -

$(document).ready(function(){
    $("button").click(function(){

         document.getElementById('apple').style.display='block';
    });
});

但问题在于 -

 $(document).ready(function(){
    $("button").click(function(){
         $("#div1").empty();
         document.getElementById('apple').style.display='block';
    });
});

JSFiddle

有人可以解释原因吗？

Answer 1

这是因为元素已在前一行被删除。你可以这样做你想做的事情（但你应该找到另一种方式）：

$(document).ready(function(){
    $("button").click(function(){
         var apple = document.getElementById('apple');
         $("#div1").empty().append(apple);
         apple.style.display='block';
    });
});

Answer 2

您已移除div1的内容，因此文档中不再存在apple。

因此，当您稍后致电document.getElementById('apple')时，您将无法获得任何元素。

jQuery中的JavaScript语法

2 个答案: