change css classes of element added to DOM at runtime

Question

I've included some JavaScript from a third party in my page. This adds the following element to the page some time after the page is loaded:

<a class="foo">some link</a>

I need to ensure that this is changed to:

<a class="bar">some link</a>

ASAP after the element is added to the page. I tried adding the following to a JQuery ready handler

$('a.gullSearchBtn').removeClass('gullSearchBtn').addClass('roundButton');

But this executes before the element is added and therefore doesn't work. I've searched the web and it seems like the jQuery feature known as "livequery" might be the solution to my problem, but I can't seem to get it to work.

`This adds the following element to the page some time after the page is loaded` is key to your question. Can you elaborate on what `some time after` actually means? — Frédéric Hamidi, Mar 28 '12 at 21:39
@Don - I hate this solution, but it is what I ended up doing for something very similar on one of my own sites. At least it tries to be somewhat graceful. How is the element added? Is there ANY event or hook you can grab? http://stackoverflow.com/questions/7323716/how-to-mimic-the-jquery-plugin-livequery — mrtsherman, Mar 28 '12 at 21:55
@Don: hi dude, are you considering to check my answer? i know it is an old one, but time by time i'm going back to check old answers without a current solution...! ;) — Luca Filosofi, Aug 02 '12 at 18:43

James Hay · Answer 1 · 2012-03-28T22:14:30.293

1

You could just go native styles and use a setTimeout function to check if it exits. But this will only work if you have a unique way to identify that element eg: it is the only anchor element with the foo class

My Recommended Loop

$(document).ready(function(){
    checkTimer();
});

function checkTimer(){
    var ele = $('a.foo');
    if(ele.length == 0){
        setTimeout(function(){
            checkTimer();
        },100);
    }
    else {
        ele.attr('class','bar');
    }
}

Some will suggest that you use a setInterval() which provides the same functionality as the loop above. I know from personal experience how prone this is to breaking though, but here is the code for that version.

setInterval() Loop

var timer;
$(document).ready(function(){
    timer = setInterval(function(){
        checkTimer();
    },100);
});

function checkTimer(){
    var ele = $('a.foo');
    if(ele.length != 0){
        ele.attr('class','bar');
        clearTimeout(timer)
    }
}

edited Mar 28 '12 at 22:14

answered Mar 28 '12 at 21:41

James Hay

7,115
6
33
57

3

`setInterval()` is designed for that kind of functionality, using `setTimeout()` just results in more complicated code. As you already have `$('a.foo')` stored in `ele`, redoing the selection in the `else` block is unnecessary. – Anthony Grist Mar 28 '12 at 21:49
@AnthonyGrist. Though you're right, it's still a good answer! **+1** (for both of you...) – gdoron Mar 28 '12 at 21:56
@AnthonyGrist I have corrected the `ele` issue in my edit. I don't recommend you use setInterval(), it's horribly buggy, sometimes doesn't run, sometimes just stops for no reason. The setTimeout function in a loop is far more reliable. I'll try to find a source for that info though. – James Hay Mar 28 '12 at 22:10

score 1 · Answer 2 · edited May 23 '17 at 10:34

1

Binding to the DOMNodeInserted or DOMSubtreeModified may help accomplish this. But according to the following post this won't work with IE

How to detect new element creation in jQuery?

edited May 23 '17 at 10:34

Community

1
1

answered Mar 28 '12 at 21:49

NuNn DaDdY

2,882
2
14
19

Luca Filosofi · Answer 3 · 2014-05-22T15:06:05.487

demo: http://so.devilmaycode.it/change-css-classes-of-element-added-to-dom-at-runtime

        $(function() {
            $('.foo').click(function(e) {
                $('body').append('<p class="gullSearchBtn">text</p>');
                return false;
            });

            setInterval(function() {
                if ($('.gullSearchBtn').length)
                    $('.gullSearchBtn').removeClass('gullSearchBtn').addClass('roundButton');
                    //clearInterval() optional if you don't need to loop anymore...
            }, 100);
        });

score 0 · Answer 4 · answered Mar 28 '12 at 22:26

0

Have you considered this?

original CSS

.roundButton {
   [your rules]
}

changed CSS

.gullSearchBtn, .roundButton {
   [your rules]
}

answered Mar 28 '12 at 22:26

Majid Fouladpour

29,356
21
76
127

The class may be used for something other than CSS, for example the third party script he mentions. In which case he needs the class changed. – James Hay Mar 28 '12 at 22:31
Yes (and I'm talking of *considering* adding the selector) -- but it also may not be used for anything other than styling; in which case this would be the easiest change to get the desired result. – Majid Fouladpour Mar 28 '12 at 22:36

change css classes of element added to DOM at runtime

4 Answers4