Javascript 替代 document.write 而不是 innerHTML

Question

我修改了一个小的 js 脚本，它将日期与今天进行比较并计算差异。 (我是新手) 但是，它使用 document.write，有人告诉我这是不好的。 我不知道为什么它不好，人们只是说它不好，从不解释为什么。 无论如何，我正在寻找替代方案。 innerHTML 似乎不起作用，本网站上回答的其他问题只是指向 DOM 操作引用，而没有真正回答问题。

这是我的脚本:

    //Set the two dates
    var iquit =new Date(2013, 1, 15);
    today=new Date();
    //Get 1 day in milliseconds
    var one_day=1000*60*60*24;
    var day_numeric=Math.ceil((today.getTime()-iquit.getTime())/(one_day));
    //Calculate difference btw the two dates, and convert to days
    document.write("<p>"+day_numeric+
            " days have gone by since you quit smoking!</p>"+
            "<p>You have saved "+ day_numeric*7+" pounds</p>");

如果有人能告诉我更好的写法，那就太棒了。

Answer 1

document.write() 的问题就是如果你在 DOM 准备好后调用它，它会覆盖现有的 DOM。这SO answer对为什么 document.write() 很少是最佳选择有更广泛的解释。

使用 .innerHTML 应该可以正常工作，但您需要选择要添加内容的元素。所以像这样:

document.getElementById("idOfSomeElement").innerHTML = "your content";

Live example

使用什么方法来获取正确的元素取决于您必须选择的内容，但如果可能，最简单的方法可能是将 ID 附加到您要向其添加内容的元素，并使用以上方法。