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附加到要添加内容的元素，并使用以上方法。

Answer 2

如果您使用纯JavaScript，最好的方法之一可能是：

var paragraph1 = document.createElement("p");
paragraph1.appendChild(document.createTextNode(day_numeric+" days have gone by since you quit smoking!"));

var paragraph2 = document.createElement("p");
paragraph1.appendChild(document.createTextNode("You have saved "+ day_numeric*7+" pounds"));

document.body.appendChild(paragraph1);
document.body.appendChild(paragraph2);

100％标准DOM。

关于document.write：好或坏......

我猜有些人认为document.write是一种不好的做法，因为它是（X）HTML文档输出原始内容的低级方式。

由于（X）HTML基本上是XML的一种方言（或至少基于XML和SGML），正确的和期望的编写文档的方式是创建节点并将它们附加到整个文档。

document.write在最后写入的元素之后写入内容，当您想要决定将新创建的元素放在文档中的哪个位置时，您将失去很多控制权。

例如，您是否会从<head>元素中加载的JavaScript函数中输出段落？这很难，因为它不会在身体中呈现。 那太糟糕了。

最好创建DOM元素/节点，然后使用appendChild(...)将它们附加到文档中。

Answer 3

请查看此链接，了解其被视为不良做法的原因：Why is document.write considered a "bad practice"?

你是如何使用innerHTML的？

你有没有试过像

这样的东西

<script>
...
document.getElementById('container-id').innerHTML = "<p>"+day_numeric+" days have gone by since you quit smoking!</p>"+"<p>You have saved "+ day_numeric*7+" pounds</p>";
</script>

这需要在页面中某处具有container-id id的元素，例如：

<div id='container-id'></div>

对document.write的Javascript替代方法不是innerHTML

3 个答案:

关于document.write：好或坏......