javascript document.writeln（）中的CSS不'；行不通

我正在与一个应用程序前端开发和面临的造型问题，当我试图使前端看起来不错。我有以下代码：

输出HTML和CSS（包括内联CSS和样式表）：这看起来很完美，但没有数据，如标题、开始日期等。是硬编码的

<div class="rsvpEvent">                     
    <p style="text-align:center;"><b>title</b></p><p class="cancel">cancel</p>
    <div style="width:30%;height:68%;float:left;margin-left:2%;margin-right:2%;">
        <img class="backgroundImage" src="img/surf2.jpg">                       
    </div>
    <b style="color:#3ad7ff">3 friends <font face="ico" color="#ffffff">&#xe60a;</font> 9 others</b><br />
    startDate<b style="color:#3ad7ff;">15km</b>
    <div class="facebookBox"><font face="ico" style="position:relative;top:-6vh;left:1vw;">&#xe608;</font></div>
    <div class="twitterBox"><font face="ico" style="position:relative;top:-1vh;left:1vw;">&#xe609;</font></div>
    <img src="img/Tulips.jpg" class="profileBox" onclick="showProfilefromRSVP()">
    <div class="viewBox" onclick="showFeed()">view</div>
</div>

标题取消

3位朋友；9其他

起始日期15公里
；
；
看法

然后，我用writeln将它转换成javascript，它确实有title、startDate等数据。但是所有的样式包括内联样式和样式表都不起作用

xhr.onload=function(){
    result = JSON.parse(xhr.responseText);
    for(var i=0;i<result[0].length;i++){
        var title = result[0][i];
        var startDate = result[1][i];

        document.writeln("<div class=\"rsvpEvent\">");
        document.writeln("<p style=\"text-align:center;\"><b>"+title+"</b></p><p class=\"cancel\">cancel</p>");
        document.writeln("<div style=\"width:30%;height:68%;float:left;margin-left:2%;margin-right:2%;\">");
        document.writeln("<img class=\"backgroundImage\" src=\"img/surf2.jpg\">");
        document.writeln("</div>");
        document.writeln("<b style=\"color:#3ad7ff\">3 friends <font face=\"ico\" color=\"#ffffff\">&#xe60a;</font> 9 others</b><br />");
        document.writeln(startDate+"<b style=\"color:#3ad7ff;\">15km</b>");
        document.writeln("<div class=\"facebookBox\"><font face=\"ico\" style=\"position:relative;top:-6vh;left:1vw;\">&#xe608;</font></div>");
        document.writeln("<div class=\"twitterBox\"><font face=\"ico\" style=\"position:relative;top:-1vh;left:1vw;\">&#xe609;</font></div>");
        document.writeln("<img src=\"img/Tulips.jpg\" class=\"profileBox\" onclick=\"showProfilefromRSVP()\">");
        document.writeln("<div class=\"viewBox\" onclick=\"showFeed()\">view</div>");
        document.writeln("</div>");
    }
}

xhr.onload=function（）{
result=JSON.parse（xhr.responseText）；
对于（var i=0；i当您在页面加载后使用document.write时，就像使用白板一样，它会擦除白板，让您重新开始。因此，所有存在的代码都已删除。您希望使用DOM方法添加新内容。因此，您希望使用或

xhr.onload=function（）{
result=JSON.parse（xhr.responseText）；
var内容=[]；
对于（var i=0；i”+title+“
cancel
”）；
内容。推送（“”）；
内容。推送（“”）；
内容。推送（“”）；
内容推送（“3个朋友和9个其他人
”；
内容推送（起始日期+15公里）；
内容推送（；）；
内容推送（；）；
内容。推送（“”）；
内容推送（“查看”）；
内容。推送（“”）；
}
document.getElementById（“outputElem”）.innerHTML=content.join（“”）；
}
当您使用document.write加载页面后，就像使用白板一样，它会擦除白板，让您重新开始。因此，所有存在的代码都已删除。您希望使用DOM方法添加新内容。因此，您希望使用或

xhr.onload=function（）{
result=JSON.parse（xhr.responseText）；
var内容=[]；
对于（var i=0；i”+title+“
cancel
”）；
内容。推送（“”）；
内容。推送（“”）；
内容。推送（“”）；
内容推送（“3个朋友和9个其他人
”；
内容推送（起始日期+15公里）；
内容推送（；）；
内容推送（；）；
内容。推送（“”）；
内容推送（“查看”）；
内容。推送（“”）；
}
document.getElementById（“outputElem”）.innerHTML=content.join（“”）；
}
编写的最终结果是什么（
document.body.innerHtml
）？为什么要使用document.write？这是一个糟糕的做法！
document.writeln
在一个onload处理程序中，它永远不会起作用……这里的答案也应该适用于这个问题：@DukeWang你没有看到我下面的答案吗？我解释了你的问题并给了你一个解决方案。使用
document.write
的初学者教程将是禁止使用，因为它会导致您面临类似的问题。编写的最终结果是什么（
document.body.innerHtml
）？为什么要使用document.write？这是一个糟糕的做法！
document.writeln
在一个onload处理程序中，它永远不会起作用……这里的答案也应该适用于这个问题：@DukeWang你没有看到我下面的答案吗？我解释了你的问题并给了你一个解决方案。使用
document.write
的初学者教程将是禁止使用，因为它会导致您面临这样的问题。我可以使用document.getElementByClassName（“outputElem”）而不是getElementById吗？如果没有getElementByClassName，则会使用
getElementsByClassName
返回节点集，使其成为
document.getElementsByClassName（“outputElemClass”）[0].innerHTML=content.join（“”；
我保留了您的代码并对其进行了测试。我在db中有4个数据，这些数据应该会为我带来4个内容，但前3个只做了一个flash，而第4个只留给我。我还需要其他代码吗？啊，附加到循环之外！错过了循环。在更新之前完成了：）仍然感谢您的更新！我可以使用document.getElementByClassName（“outputElem”）而不是getElementById吗？如果没有getElementByClassName，则有
getElementsByClassName
返回节点集，因此它将是
document.getElementsByClassName（“outputElemClass”）[0]。innerHTML=content.join（“”）
我保留了你的代码并对其进行了测试。我有4个db数据，应该可以为我带来4个内容，但前3个只做了一个flash，剩下第4个。我需要额外的代码吗？啊，附加到循环之外！错过了循环。在更新之前已经完成了：）仍然感谢你的更新！
xhr.onload = function() {
    result = JSON.parse(xhr.responseText);
    var content = [];
    for (var i = 0; i < result[0].length; i++) {
        var title = result[0][i];
        var startDate = result[1][i];
        content.push("<div class=\"rsvpEvent\">");
        content.push("<p style=\"text-align:center;\"><b>" + title + "</b></p><p class=\"cancel\">cancel</p>");
        content.push("<div style=\"width:30%;height:68%;float:left;margin-left:2%;margin-right:2%;\">");
        content.push("<img class=\"backgroundImage\" src=\"img/surf2.jpg\">");
        content.push("</div>");
        content.push("<b style=\"color:#3ad7ff\">3 friends <font face=\"ico\" color=\"#ffffff\">&#xe60a;</font> 9 others</b><br />");
        content.push(startDate + "<b style=\"color:#3ad7ff;\">15km</b>");
        content.push("<div class=\"facebookBox\"><font face=\"ico\" style=\"position:relative;top:-6vh;left:1vw;\">&#xe608;</font></div>");
        content.push("<div class=\"twitterBox\"><font face=\"ico\" style=\"position:relative;top:-1vh;left:1vw;\">&#xe609;</font></div>");
        content.push("<img src=\"img/Tulips.jpg\" class=\"profileBox\" onclick=\"showProfilefromRSVP()\">");
        content.push("<div class=\"viewBox\" onclick=\"showFeed()\">view</div>");
        content.push("</div>");
    }
    document.getElementById("outputElem").innerHTML = content.join("");
}