Question

I am adding a class dynamically to some elements. And i need to get the innerHTML of the clicked element where the added class is present. Can anyone have any idea of how to get the innerhtml with refer to class?

Please note that i don’t want to use any Javascript libraries like jQuery.

Answer 1

Try this:

document.body.onclick = function(e) {
    var clickedEl = window.event ? event.srcElement : e.target;
    while (clickedEl != null) {
        if (clickedEl.className
            && (" " + clickedEl.className + " ").indexOf(" yourclass ") != -1) {
            // do something, e.g.,
            alert("Element with class was clicked");
            return;
        }
        clickedEl = clickedEl.parentNode;
    }
}​

Demo: http://jsfiddle.net/3qChA/

This will do “something” (in my example show an alert) when any element with class “yourclass” is clicked, or when any descendant element of an element with “yourclass” is clicked. Obviously you can replace the hard-coded “yourclass” with a variable as appropriate.