使用javascript加载页面后，将外部CSS应用于动态html

我在一个外部js中有以下内容，它被延迟到页面加载之后

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();

html放在div中，但是soc.css中的css不应用于div的新内容

有没有办法在初始加载后将css应用于div。如果可能的话，我不希望在初始加载时保留页面上的所有css。不使用jQuery

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

在此更新

以下是我所拥有的：

index.html

<div id=foot></div>

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>

没有控制台错误，样式似乎也没有更新

当我点击

 <ul id="sm">

当我点击一个人的时候，我得到了这个

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

你的想法。

试试这个：

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();

---

我明白了为什么css没有得到应有的应用。下到缓存。soc.css被另一个页面调用，因此无法下载，因为它已经在缓存中。我更改了css和html的文件名，然后正确地应用了css

将其包装在函数中并调用它。单独加载的Js不能自动执行，必须调用它。这是你的

this.responseText

html或其他应该调用的函数，在readystatechange函数中添加html后放在div.call函数中。@MuhammadUmer-所以用名称包围css函数，然后在添加html后调用该函数？我试过了你的建议。CSS仍然没有得到应用。HTML正在填充div，图像像以前一样来自css文件，但是样式本身没有被应用。尝试这个新东西，检查css文件是否被添加，检查控制台是否有任何错误。

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;
}

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

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();