Javascript 隐藏HTML内容的正确方法

我正在编写一个小的HTML+JavaScript（即所谓的）应用程序。用户有两个选择（单选按钮），根据他选择的内容，我会在选择单选按钮下显示内容“A”或内容“B”

现在我想知道什么是处理这些内容的正确方法。我应该有两个div，只有一个可见，这取决于选择，还是应该使用JavaScript将InnerHTML写入单个div，这取决于单选按钮的状态。这是一个小型的“计算”应用程序，因此不会提交任何表格数据

谢谢回复！

---

J

使用两个div，这两个div都属于包含

display:none

规则的CSS类。然后，当用户选择一个选项时，在希望显示的div上覆盖该CSS，并在不希望显示的div上撤消覆盖。例如，如果用户选择选项1：

div1.style.display = 'block';
div2.style.display = '';

---

最好有2个div并显示需要显示的div。动态地编写内容会使设计变得太困难，并且不会带来真正的价值。

使用2个div。将HTML嵌入Javascript很难看，这使得页面布局很困难。

使用两个div，然后使用

display:none用于隐藏div。
您可以使用：

.myDivHidden
{
   display: none;
}

.myDiv
{
   display: block;
}

<div id="myDiv">
   Content
</div>

只需根据您希望使用的方法交换可见性类

.myDivInvisible
{
   visibility: hidden;
}
.myDivVisible
{
   visibility: visible;
}

<div id="myDiv">
   Content
</div>

if (radio button check goes here)
{
   document.getElementById('myDiv').className = className; // display or visibility
}
else
{
   document.getElementById('myDiv').className = className; // display or visibility
}