Add another class to a div

Question

I have a function that checks the age of a form submission and then returns new content in a div depending on their age. Right now I am just using getElementById to replace

Answer 1

In the DOM, the class of an element is just each class separated by a space. You would just need to implement the parsing logic to insert / remove the classes as necesary.

I wonder though... why wouldn't you want to use jQuery? It makes this kind of problem trivially easy.

Answer 2

Well you just need to use document.getElementById('hello').setAttribute('class', 'someclass');.

Also innerHTML can lead to unexpected results! Consider the following;

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 3

If the element has no class, give it one. Otherwise, append a space followed by the new className:

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

Answer 4

I am facing the same issue. If parent element is hidden then after showing the element chosen drop down are not showing. This is not a perfect solution but it solved my issue. After showing the element you can use following code.

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

Answer 5

I use below function to animate UiKit gear icon using Just JavaScript

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>

This code not work here...you must add UIKit Style to it

Answer 6

Use Element.classList

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

The .add method will only add the class if it doesn't already exist on the element. So no need to worry about duplicate class names.