Проверьте, динамически добавляемый класс существует

Question

document.addEventListener('DOMContentLoaded', function() { 
    if (document.getElementsByClassName('myclass').length) { 
     doSomething(); 
    } 
}); 

Это работает, если <div class="myclass">...</div> прямо написано в HTML документе, но если он вставлен самая JavaScript. Есть идеи?

Answer 1

Хорошо, подумайте о том, что вы делаете с слушателем. Вы запускаете этот код при возникновении события DOMContentLoaded. Если вы меняете DOM в других местах, нет гарантии, что этот код будет запущен впоследствии. Фактически, если вы вручную не излучаете это событие, it seems like он будет работать только один раз на странице.

Однако, поскольку я не знаю, как выглядит код, который добавляет классы во время выполнения, я не могу быть более конкретным.

В качестве примера, следующий код создает «РОМ загруженную», но не «класс найден!»:

document.getElementById("foo").className = "myclass"; 

document.addEventListener('DOMContentLoaded', function() { 

    alert('dom loaded'); 

    if (document.getElementsByClassName('myclass').length) { 
     alert('My class is found!'); 
    } 
}); 

И следующий код производит и, как и ожидалось.

document.addEventListener('DOMContentLoaded', function() { 

    alert('dom loaded'); 

    document.getElementById("foo").className = "myclass"; 

    if (document.getElementsByClassName('myclass').length) { 
     alert('My class is found!'); 
    } 
}); 

Чтобы показать вам, что я имею в виду, вот plunkr ссылки:

working

not working

Answer 2

Используйте className.indexOf

myElement = document.getElementById("IdOfTheElement"); 

if(myElement.className.indexOf('MyClassName') != -1){ 
    /* The class exist*/ 
}