innerHTML 是否完全摆脱了元素？答案

【问题标题】：does innerHTML get rid of elements entirely?innerHTML 是否完全摆脱了元素？
【发布时间】：2014-06-28 18:15:09
【问题描述】：

编辑：我想通了，感谢您的宝贵时间！

我有一个 id 为容器的 div 和上面的三个按钮。

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

单击每个按钮一次可以正常工作，因为我只是替换 div 中的元素。但是当我尝试重新单击按钮时，我的控制台打印出 'Uncaught TypeError: Cannot read property 'innerHTML' of null '

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

如果没有，我正在考虑为我的 html 文件中的每个按钮设置一个 div，然后使用 display:none。当用户点击任何按钮时，该按钮的 div 将设置为 display: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>

【问题讨论】：

将您的源代码放在这里，以便我们更好地了解您面临的问题。
我尝试reproduce the problem you described，但不能。当我用 innerHTML 在 DOM 中覆盖它们后尝试读取它们时，这些元素仍然存在并且可以访问。您应该提供一个简化的测试用例来证明您的问题。
好的，正在努力。我肯定需要简化它，因为我通过 AJAX 从 MySQL 中提取数据，所以我现在正在研究 JSFiddle
在 JSFiddle 中检查控制台，您仍然收到错误消息，我已经在答案中写下了原因。

标签： javascript innerhtml

【解决方案1】：

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

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

【讨论】：

感谢您的回答！问题是我不是从 HTML 页面本身获取数据，而是从数据库中提取数据。没有让我的答案更清楚是我的错
我认为在这种情况下从服务器抓取数据和任何其他 hrml 内容应该没有任何区别。

【解决方案2】：

好的，现在有问题了。

你在写：-

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

然后，

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

然后你用一个sring设置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;

【讨论】：