How to get the css of a javascript container and all objects within it in javascript or jquery
<p>Some elements in my page are rendered through php code. Sometimes, on link clicks that redirect to a page in the same site, I want to insert html elements like div, span etc through javascript in their respective places. My main question is: how do I insert the elements in the appropriate place, and apply the same css styles to them as they would have if they had been inserted through normal flow like php or html code.</p>

<p>For example, suppose I need to insert a div element, which has a span element and an image element inside it, inside a container that has the other elements with the same structure:</p>

<pre><code>&lt;div class="container"&gt;&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;img /&gt;&lt;/div&gt;...&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;img /&gt;&lt;/div&gt; &lt;/div&gt;  .
</code></pre>

<p>I want to apply same style rules to my inserted elements as there are for other elements. That is, the inserted </p>

<pre><code>&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;img /&gt;&lt;/div&gt;
</code></pre>

<p>should have the same styles applied as </p>

<pre><code>&lt;style&gt;
</code></pre>

<p>.container div {...}
   .container div span {...}
   .container div img{...}
    </p>

<p>But I dont want to manually compute the styles and then add those styles in jquery. How do I do this. The second part of this question is: suppose there are conditional styles applied depending on the browser. Now, how do I apply the conditional styles depending on the browser, without trying to do it manually?</p>
