Javascript 将另一个类添加到div

我有一个函数，它检查表单提交的时间，然后根据时间返回div中的新内容。现在我只是使用getElementById来替换HTML内容。但我认为如果我也可以在div中添加一个类，对我来说会更好。比如说我有

if (under certain age) {
    document.getElementById('hello').innerHTML = "<p>Good Bye</p>"; 
    createCookie('age','not13',0)
    return false;
} else {
    document.getElementById('hello').innerHTML = "<p>Hello</p>";  
    return true;
}

if（特定年龄以下）{
document.getElementById（'hello'）.innerHTML=“再见”
”；
createCookie（'age'，'not13'，0）
返回false；
}否则{
document.getElementById（'hello'）.innerHTML=“hello
”；
返回true；
}

---

我想做的是将所有内容都放在一个div中，如果返回false，那么该div将消失并替换为其他内容。我能想出一些好办法来用纯JavaScript实现这一点吗。我不想将jQuery用于此特定函数。

您可以在

className

成员中附加一个类，并使用前导空格

document.getElementById('hello').className += ' new-class';

---

请参见

如果元素没有类，请给它一个类。否则，请在新类名后面追加一个空格：

  var el = document.getElementById('hello');
  if(el) {
    el.className += el.className ? ' someClass' : 'someClass';
  }

---

在DOM中，元素的类就是由一个空格分隔的每个类。您只需实现解析逻辑即可根据需要插入/删除类

---

但是我想知道。。。为什么不想使用jQuery？这使得这类问题变得非常简单。

您只需要使用

document.getElementById（'hello'）.setAttribute（'class'，'someclass'）

此外，
innerHTML
可能会导致意外的结果！考虑下列事项；
var myParag = document.createElement('p');

if(under certain age)
{
    myParag.text="Good Bye";
    createCookie('age', 'not13', 0);
    return false;
{
else
{
    myParag.text="Hello";
    return true;
}

document.getElementById('hello').appendChild(myParag);

我也面临同样的问题。如果父元素隐藏，则在显示所选元素后，下拉列表将不显示。
这不是一个完美的解决方案，但它解决了我的问题。显示元素后，可以使用以下代码

function onshowelement() { $('.chosen').chosen('destroy'); $(".chosen").chosen({ width: '100%' }); }

我使用下面的函数仅使用JavaScript来设置UiKit齿轮图标的动画


document.getElementById（“spin_it”）.onmouseover=function（e）{
var el=document.getElementById（“spin_it”）；
var Classes=el.className；
var NewClass=Classes+“英国图标旋转”；
el.className=NewClass；
控制台日志（e）；
}
使用

.add
方法仅当类在元素上不存在时才会添加该类。所以不必担心重复的类名。
太棒了，谢谢！你能再解释一下这部分吗someClass'：'someClass'为什么要这样定义两次。。。第一部分做什么？@zac-这是条件运算符。如果
el.className
的计算结果为true，则分配第一个值（问号后），如果为false，则分配第二个值。这是一条如果……否则的捷径。看看这里：那是
条件吗如果为真：'如果为假'注释称为三元操作。它适用于多个真/假树，尽管它们可能会在前两个之外变得混乱<代码>控制台.log（班次[i]。状态！=“活动”？班次[i]。id:shift[i]。hbn+shift[i]。类型==“产品”？“-”+shift[i].id:“
第二个条件是真块还是假块并不重要。如果它是假块，则更容易读取。如果两边都有附加条件，最好使用多个if-else-if块。@DavidGiven因为这是一个三元运算符，他实际上并没有输出
el.className
，而是输出我们检查三元运算符是否存在。不输出条件运算符，但根据
className
的存在情况，正确/错误的结果是。这个答案发表至今已有七年了，而在当时这是最好的方法，@Rich answer是处理CSS类na的更新且更简洁的方法现在的mes.document.getElementById（'hello'）。setAttribute（'class'，'someclass'）也会这样做……这是目前更好的方法。如果类已经存在，则只需添加/删除（添加/删除）而不是可能多次添加同一类。
document.getElementById('hello').classList.add('someClass');