Javascript innerHTML完全摆脱了元素吗？

编辑：我想出来了，谢谢你的时间

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

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

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

所以我假设innerHTML完全摆脱了元素。是否有方法检索这些元素，以便我可以不断单击按钮并显示相应的元素

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

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

是的，使用innerHTML确实会删除div容器中以前的元素。因此，如果你想再次抓住这些元素，你不能。上述错误将在控制台中打印

JsFiddle：

1.
2.
3.
段落中的数据

我尝试了以下方法，效果很好，请检查：-

<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>

红色！
蓝色
绿色
函数myFunction（e）{
document.getElementById（'container'）。innerHTML=e
}

好的，现在有问题了

你在写：-

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

然后使用sring设置innerHTML：-

container.innerHTML = data;

因此，假设data=“abc”

您的html将成为

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

它没有得到任何东西，也没有显示错误

要么你替换

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

与

并从html中删除p标记，或编写：-

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

然后在各自的案例中写下以下内容：-

para.innerHTML = data2;
para.innerHTML = data;

---

将您的源代码放在这里，以便我们更好地理解您面临的问题。我尝试过，但未能做到。在DOM中用innerHTML覆盖元素后，当我试图读取它们时，这些元素仍然存在，并且可以访问。您应该提供一个简化的测试用例来演示您的问题。好的，让它开始工作。我确实需要简化它，因为我正在通过AJAX从MySQL提取数据，所以我现在正在使用JSFIDLE检查JSFIDLE中的控制台，您仍然会看到错误，我已经在我的答案中写下了原因。感谢您的回答！问题是，我不是从HTML页面本身获取数据，而是从数据库中提取数据。我的错误是没有让我的答案更清楚，我认为在这种情况下，从服务器获取数据和任何其他hrml内容都不会有任何区别。

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

   container.innerHTML = data2;

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

para.innerHTML = data2;
para.innerHTML = data;