Question

编辑：我想通了，谢谢你的时间！

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

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

点击每个按钮一次正常，因为我只是替换div中的元素。但是当我尝试重新点击按钮时，我的控制台会打印出＆＃39; Uncaught TypeError：无法读取属性＆inner;内部HTML＆＃39;为null＆＃39;

所以我假设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>

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

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

innerHTML完全摆脱了元素吗？

2 个答案: