3

我修改了一个小 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>");

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

4

3 回答 3

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(...).

于 2013-02-18T09:50:14.813 回答
2

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

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

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

活生生的例子

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

于 2013-02-18T09:46:44.990 回答
0

检查此链接以了解为什么它被认为是不好的做法：为什么 document.write 被认为是“不好的做法”？

你是如何使用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>
于 2013-02-18T09:49:02.463 回答