更改 className 与更改 innerHTML答案

【问题标题】：Changing className vs Changing innerHTML更改 className 与更改 innerHTML
【发布时间】：2014-08-16 21:55:24
【问题描述】：

我需要切换两个词（即 Hello 和 World）。现在我创建了两个 spans 并使用 CSS 切换它们。但是，我可以创建一个 div 并单独更改 innerHTML。我的问题是哪一个是有效的和有效的？下面是示例 HTML、CSS、JS 代码。

<div class='enablecss2'>
    <span class='css1'>Hello</span>
    <span class='css2'>World</span>
</div>

.css2 {
    display:none;
}

.enablecss2 .css2 {
    display:block;
}

.enablecss2 .css1 {
    display:none;
}

<script>
    function toggle(el,event)
      { 
          if(el.className == '')
              el.className = 'enablecss2';
          else
              el.className = '';
      }

</script>

【问题讨论】：

或选项 C 将使用 .textContent 而不是使用两个元素或 innerHTML
如果你设置el.className = 'enablecss2'，它会覆盖属性的类值，所以它不再包含'css1'。
考虑到可访问性和辅助技术，方法 A 可能是更好的选择，因为标记中同时包含两个词，并且最终用户应该看到整个内容（两个词）。

标签： css innerhtml classname

【解决方案1】：

两者都是有效的方法，就切换的渲染速度而言，这并不重要。但就高效编码而言（= 更少代码但结果相同），innerHTML 方法是更好的方法，因为您需要更少的 HTML 并且不需要 CSS 代码：

<div class='enablecss2'>
    Hello
</div>

<script>
// your toggle function
</script>

【讨论】：

如果反对者有礼貌地给出理由？