使用JavaScript修改页面会删除所有CSS

Question

我正在尝试制作一个从播客中获取XML文件的网页，并列出所有标题的列表以及指向播客的直接链接。在大多数情况下，这是可行的，但是当我尝试使用CSS向页面中添加样式时，它便消失了，因此该页面与最初没有应用任何样式的情况一样。

这是我正在使用的一段JavaScript，将其写在页面上。

var podcasts;
var titles = new Array;
var urls = new Array;

var yogpod = function() {

    document.write("<h1> YogPod </h1>");

    var xml = loadXMLDoc("http://localhost/yogpod/yogpod.xml");
    podcasts = xml.getElementsByTagName("item");

    //Extract info into arrays for ease of use
    for (i=0; i<podcasts.length; i++)   {   titles[i] = podcasts[i].children[0].textContent         }
    for (i=0; i<podcasts.length; i++)   {   urls[i] = podcasts[i].children[6].getAttribute('url')   }


    //Make podcast 1 first
    titles.reverse();
    urls.reverse();

    //Write podcasts and URLs on page
    for (i=0; i<podcasts.length; i++)
    {
        var div = document.createElement('div');
        //div.setAttribute('class', 'podcast');
        div.className='podcast';
        var titleText = document.createTextNode(titles[i]);
        var urlText = document.createTextNode(urls[i]);

        div.appendChild(titleText);
        div.appendChild(document.createElement('br'));
        div.appendChild(urlText);
        div.appendChild(document.createElement('br'));

        var a = document.getElementsByTagName('body')[0];
        a.appendChild(div); 
    }
}

这就是结果，以及Chrome认为页面的含义。

编辑：我删除了 document.write("<h1> YogPod </h1>") 行，并修复了它。谁能告诉我为什么呢？

Answer 1

在页面加载document.write 后执行“ a ”操作时，它将在写入指定内容之前清空文档。document.write用document.createElement("h1")和替换document.body.appendChild(...)