Apply external CSS to dynamic html after page has loaded using javascript

Question

I have the following in an external js, which is deferred until after page load.

var stylesheet=document.createElement("link");
stylesheet.href="soc.css";
stylesheet.rel="stylesheet";
document.getElementsByTagName("head")[0].appendChild(stylesheet);
window.___gcfg={parsetags:'onload'};

var xObj=new XMLHttpRequest();
xObj.open('GET','social.html',true);
xObj.onreadystatechange=function() {
    if(this.readyState == 4 && this.status == 200) { 
        document.getElementById("foot").innerHTML=this.responseText;
    }
};
xObj.send();

The html is placed in the div, but the css from soc.css is not applied to the new content of the div.

Is there any way to apply css to div's after the initial load. I would prefer not having to keep all the css on the page for initial load if possible. Not using jQuery.

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Updated here

Here is what I have:

index.html

<div id=foot></div>

soc.css

.s{background:url(soc.png) no-repeat top left;width:32px;height:32px}
.s.s-1{background-position:0}
.s.s-2{background-position:-37px 0}
.s.s-3{background-position:-74px 0}
.s.s-4{background-position:-111px 0}
.s.s-5{background-position:-148px 0}
#sm li{display:inline-block;max-width:100%;padding:3px}
#sm{list-style:none;margin-left:-40px;text-align:center}
#ft{font-size:22px;margin:80px 0 0;text-align:center}

social.html

<p>Join us on Google+
<hr>
    <ul id=sm>
        <li><a href=//plus.google.com><div class="s s-1" title=googleplus></div></a>
        <li><a href=https://www.facebook.com><div class="s s-2" title=facebook></div></a>
        <li><a href=https://twitter.com><div class="s s-3" title=twitter></div></a>
        <li><a href=#><div class="s s-4" title=pinterest></div></a>
        <li><a href=http://www.linkedin.com><div class="s s-5" title=linkedin></div></a>
    </ul>
<hr>
<h1 id=ft>Hello</h1>

When I run both your's or my code in the js the exact happens. The html from social.html is placed in the div on index.html

The images from soc.css appear in correct div classes on index.html

The following 3 lines in this example are never applied:

 #sm li{display:inline-block;max-width:100%;padding:3px}
 #sm{list-style:none;margin-left:-40px;text-align:center}
 #ft{font-size:22px;margin:80px 0 0;text-align:center}

No console error's and it appears the styles do not get updated either.

When I click on

 <ul id="sm">

this is what I get

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

When I click on an individual li I get this

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

Your thoughts.

Answer 1

Try this:

function addCss() {
 var stylesheet=document.createElement("link");
 stylesheet.href="soc.css";
 stylesheet.rel="stylesheet";
 stylesheet.type = 'text/css'
 document.getElementsByTagName("head")[0].appendChild(stylesheet);
 window.___gcfg={parsetags:'onload'};
}
var xObj=new XMLHttpRequest();
xObj.open('GET','social.html',true);
xObj.onreadystatechange=function(){
 if(this.readyState==4&&this.status==200){ 
  document.getElementById("foot").innerHTML=this.responseText;
  addCss();
 }};
xObj.send();

Answer 2

I figured out why the css was not getting applied like it should have. Comes down to cache. soc.css was being called by another page so it was not getting downloaded since it was already in cache. I changed the file name of both the css and html then css was applied correctly.