创建div的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 时，它会在写入指定内容之前清空文档。将document.write替换为document.createElement("h1")和document.body.appendChild(...)

Answer 2

       // you have to create new element and new textNode


var s = document.createElement('h1');
var t = document.createTextNode('yodu..');

var headr = s.appendChild(t);