Question

Given a webpage that has a div such as:

<div id="test" class="test">something</div>

Is it possible to insert additional class names into the list, so that it read something like:

<div id="test" class="test test1 test2">something</div>

? I could easily change the text between the divs using innerHTML, but can’t figure out a way to add to the class list.

Answer 1

What you want to do is invalid (An element cannot have more than on ID). An ID can’t contain spaces either, however Chrome seems to allow it. I’m not sure about other browsers, but in Chrome you could do something like this to update it:

document.getElementById('test').id += ' test1 test2';

But then to access that element you’ll have to use:

document.getElementById('test test1 test2');

Keep in mind that this is invalid so there’s no reason that it should continue to work in future versions of a browser just because it works now.

Edit

You could use these Javascript functions I wrote the other day for accessing adding and removing classes. The addClass function will accept an array, or array-like object and add the class to each element. If it’s not array-like it will just add the class to that element. Use it like:

addClass(element, 'test1');
addClass(element, 'test2');

Code:

function hasClass(el,c){
    var elc = ' '+el.className+' ';
    if(elc.indexOf(' '+c+' ') < 0)
        return false;
    return true;    
}

function addClass(els, c){
    if(typeof els.length === 'number' && typeof els[els.length-1] !== 'undefined')
        for(var i = els.length; i--;)
            _addClass(els[i], c);
    else
        _addClass(els, c);

    function _addClass(el, c){
        if(c.indexOf(' ') >= 0)
            return false;
        if(hasClass(el, c))
            return true;
        el.className += ' '+c;
        return true;
    }
}

function removeClass(els, c){
    if(typeof els.length === 'number' && typeof els[els.length-1] !== 'undefined')
        for(var i = els.length; i--;)
            _removeClass(els[i], c);
    else
        _removeClass(els, c);

    function _removeClass(el, c){
        if(c.indexOf(' ') > -1)
            return false;
        if(!hasClass(el, c))
            return true;
        var elc = (' '+el.className).replace(' '+c, '');
        if(elc.indexOf(' ') == 0)
            elc = elc.substring(1);
        el.className = elc;
        return true;
    }
}

Minified version:

function hasClass(a,d){var b=" "+a.className+" ";if(b.indexOf(" "+d+" ")<0){return false}return true}function addClass(b,e){if(typeof b.length==="number"&&typeof b[b.length-1]!=="undefined"){for(var a=b.length;a--;){d(b[a],e)}}else{d(b,e)}function d(f,g){if(g.indexOf(" ")>=0){return false}if(hasClass(f,g)){return true}f.className+=" "+g;return true}}function removeClass(b,e){if(typeof b.length==="number"&&typeof b[b.length-1]!=="undefined"){for(var a=b.length;a--;){d(b[a],e)}}else{d(b,e)}function d(f,h){if(h.indexOf(" ")>-1){return false}if(!hasClass(f,h)){return true}var g=(" "+f.className).replace(" "+h,"");if(g.indexOf(" ")==0){g=g.substring(1)}f.className=g;return true}};