使用javascript将另一个类添加到div

我有一个函数，检查表单提交的年龄，然后根据年龄返回一个div中的新内容。 现在我只是使用getElementById来replacehtml内容。 如果我也可以添加一个类到一个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; } 

我想要做的是在div中的一切，如果返回false然后该div消失，并用其他内容replace..我可以得到任何想法，以一个很好的方式来实现这个纯JavaScript。 我不想使用jQuery这个特定的function。

Answer 1

如果元素没有类，给它一个。 否则，追加一个空格，然后是新的className：

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

Answer 2

您可以将类添加到className成员中，并带有前导空格。

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

请参阅https://developer.mozilla.org/En/DOM/Element.className

Answer 3

使用Element.classList

 document.getElementById('hello').classList.add('someClass'); 

Answer 4

那么你只需要使用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); 

Answer 5

在DOM中，元素的类只是每个类由一个空格分隔。 你只需要实现parsing逻辑来插入/删除类作为必要的。

我想知道，为什么你不想使用jQuery？ 这使得这种问题非常容易。

Answer 6

我使用下面的函数来使用Just JavaScript来animationUiKit齿轮图标

 document.getElementById("spin_it").onmouseover=function(e){ var el = document.getElementById("spin_it"); var Classes = el.className; var NewClass = Classes+" uk-icon-spin"; el.className = NewClass; console.log(e); } 

 <span class="uk-icon uk-icon-small uk-icon-gear" id="spin_it"></span> 

Answer 7

我面临同样的问题。 如果父元素被隐藏，那么在显示select的元素下拉菜单后不会显示。 这不是一个完美的解决scheme，但它解决了我的问题。 显示元素后，您可以使用以下代码。

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