How do i create dynamic div element using WEB WORKER in Javascript?

Question

I have a project where I need to create a thousands of DIV elements when I first load the index, I tried WEB Workers so that my loading time can be saved a bit.

I am not able to create an Dynamic Div Element where I need to append it to some other div here is an short example what I am trying to do!

index.html

<script>
$(document).ready(function(){
  if(typeof(Worker)!=="undefined"){
    // Web worker support!enter code here
    if(typeof(w)=="undefined"){
      w=new Worker("js/WW.js");
    }else{
      //re-utilizing the same worker.
    }
  }else{
    // Sorry! No Web Worker support..
  } 
});
</script>

WW.js

for(var i=0;i<100;i++){
  var a=document.createElement("div");
}

If web workers cannot solve my problem can anyone let me know any other Approach?

Answer 1

You can pass the data generated in the worker thread via message (event):

for(var i=0;i<100;i++) {
  self.postMessage('<div>' + i + '</div>');
}

And add event listener in the document:

  w = new Worker("js/WW.js");
  w.addEventListener('message', 
    function(e) { $('#result').append($(e.data)); }, 
    false
  );

I never used this in production, but the test works fine.