CODEWITHSUNDEEP
javascript
Zac
Zac

Reputation: 12836

Add another class to a div

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 the HTML content. BUt I think would work better for me if I could also add a class to a div as well. So for example I have.

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;
}

What I would like to do is have everything in a div and if return false then that div disappears and is replaced with other content. Can I get any ideas on a good way to achieve this with pure JavaScript. I don't want to use jQuery for this particular function.

Upvotes: 49

Views: 134216

Answers (7)

Rich McCluskey
Rich McCluskey

Reputation: 2011

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.

Upvotes: 61

Mostafa
Mostafa

Reputation: 989

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

Upvotes: 0

purab
purab

Reputation: 211

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%' }); }

Upvotes: -1

Jonathan Czitkovics
Jonathan Czitkovics

Reputation: 1614

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);

Upvotes: 4

Tejs
Tejs

Reputation: 41236

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.

Upvotes: 0

karim79
karim79

Reputation: 342625

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';
  }

Upvotes: 74

user229044
user229044

Reputation: 239240

You can append a class to the className member, with a leading space.

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

See https://developer.mozilla.org/En/DOM/Element.className

Upvotes: 24

Related Questions