innerHTML完全摆脱了元素吗?

does innerHTML get rid of elements entirely?

本文关键字：元素 innerHTML      更新时间：2023-09-26

编辑:我明白了，谢谢你的时间!

我有一个div, id为container，上面有三个按钮。

当用户点击上面的任何一个按钮时，javascript会根据使用innerHTML按下的按钮替换div的内容。

点击每个按钮一次工作得很好，因为我只是替换div中的元素。但是当我尝试重新单击按钮时，我的控制台打印出'未捕获的TypeError:无法读取属性'innerHTML'的null '

所以我假设innerHTML完全摆脱了元素。是否有一种方法来检索这些元素，以便我可以不断单击按钮，并有各自的元素出现?

如果没有，我正在考虑在我的html文件中为每个按钮设置一个div，然后使用display:none。当用户单击任何按钮时，该按钮的div将被设置为显示:block。

* * * * * * *编辑。我相信我回答了我自己的问题。**

是的，使用innerHTML确实摆脱了div容器内的先前元素。因此，如果您想再次获取这些元素，则无法实现。并且上述错误将在控制台中打印出来。

JsFiddle: http://jsfiddle.net/7Q4vD/

 <div id="buttonNav">
   <button id="button1">1</button>
   <button id="button2">2</button>
   <button id="button3">3</button>
</div>
<div id="container">
<p id="para">Data in paragraph</p>
</div>

我尝试了以下操作，它工作完美，检查它:-

<button type="button" id="red"onclick="myFunction(id)"> Red!</button>
<button type="button" id="blue"onclick="myFunction(id)"> Blue!</button>
<button type="button" id="green"onclick="myFunction(id)"> Green!</button>
<div id="container"></div>
 <script>
 function myFunction(e){
 document.getElementById('container').innerHTML = e
  }
 </script>

好了，现在问题来了

你写:- 

<div id="container">
<p id="para">Data in paragraph</p>
 </div>

, 

var container = document.getElementById('container');

，然后你用字符串设置innerHTML:-

container.innerHTML = data;

那么，假设data = "abc";

你的html变成

  <div id="container">
  abc
  </div>

所以这里没有p标签

因此，当您下次尝试以下操作时:-

document.getElementById('para').innerHTML = data2;

它没有得到任何东西并显示错误。

或者替换

    document.getElementById('para').innerHTML = data2;


   container.innerHTML = data2;

并从你的html中删除p标签，或者写:-

 var para= document.getElementById('para');

，然后在各自的情况下写以下内容:-

para.innerHTML = data2;
para.innerHTML = data;
相关文章：