populate document using javascript pattern
<pre><code>&lt;table id="session"&gt;
&lt;thead&gt;
    &lt;tr&gt;
        &lt;div class="borderContainer"&gt;
            &lt;div&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;script type="template" id="thead"&gt;
            &lt;div class="borderContainer"&gt;
                &lt;div&gt;&lt;/div&gt;
                &lt;h3&gt;{ColName}&lt;/h3&gt;
            &lt;/div&gt;
        &lt;/script&gt;
    &lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
    &lt;script type="template" id="tbody"&gt;
        &lt;tr&gt;
            &lt;td class="row"&gt;
                &lt;div class="borderContainer"&gt;
                    &lt;div&gt;&lt;/div&gt;
                    &lt;h3&gt;Row I&lt;/h3&gt;
                &lt;/div&gt;          
            &lt;/td&gt;
            &lt;!--
                When the parent pattern is appended to the DOM 
                populate the table additionally.
            --&gt;
        &lt;/tr&gt;
    &lt;/script&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>There are two questions that I really would like two find the answer:</p>

<p>1.How to trigger event that tells me that since this pattern is populated it tells  that:
Now the page is ready for a second addition of content.
Or to paraphrase it : How to load dynamically content on two stages without DOM loading events affect the speed?</p>

<p>2.Is there a way to nest patterns or any other approach allowing to load contents dynamically on different levels of document hierarchy on one stage?</p>

<p>10x for your kind help</p>
