Agregue una clase a un DIV con javascript

Ejemplo de HTML:

¿Cómo puedo agregar la clase class_two sin reemplazar class_one ?

resultado final:

 

Javascript estándar:

 document.getElementById('foo').className += ' class_two' // Or see deekshith's answer below if you only need to support new browsers 

o JQuery:

 $('#foo').addClass('class_two'); 

Puede usar jQuery.

 $('#YourElement').addClass('YourClass'); //add $('#YourElement').removeClass('YourClass'); //remove $('#YourElement').toggleClass('YourClass'); //toggle 

O Javascript, si lo desea.

 document.getElementById('id').classList.add('YourClass'); //add document.getElementById('id').classList.remove('YourClass'); //remove 

Una forma mejor de agregar una clase sería usar Element.classList.add () :

 document.getElementById('foo').classList.add("class_two"); 

Puede hacer la vida más fácil con un par de funciones de ayuda:

 function addClass(el, className) { var classes = el.className.match(/\S+/g) || []; if (!hasClass(el, className)) { classes.push(className); } el.className = classes.join(' '); } function hasClass(el, className) { var re = new RegExp('(^|\\s+)' + className + '(\\s+|$)'); return re.test(el.className); } addClass(document.getElementById('foo'), 'bar')