Question

In my HTML, one div block(whose id looks like kdsm_32532535) is dynamically created after about 15-20 seconds of dom loading. I want to style this block with javascript with below code.

<script type="text/javascript">
$(document).ready(function(){

if($("div[id^='kdsm_']").length > 0){ 
  $(this).css({'margin':'20px','border':'1px dotted red;'});
}
  /* OR below code. None of them working :( */     
  $("div[id^='kdsm_']").css({'margin':'20px','border':'1px dotted red;'});
});
</script>

If I would do this in document.ready, it will not work because this div block doesn’t exist on DOM ready.

How do i check continuously within interval of fraction, whether this div block is loaded or not ?

Answer 1

You should call this method in script, that puts new block to DOM. OR use the setInterval method:

function applyCss(){

if($("div[id^='kdsm_']").length > 0){ 
  $(this).css({'margin':'20px','border':'1px dotted red;'});
}
  /* OR below code. None of them working :( */     
  $("div[id^='kdsm_']").css({'margin':'20px','border':'1px dotted red;'});
}

var interval = setInterval('applyCss()',2000);

If you want to stop this interval:

window.clearInterval(interval)