javascript - 为什么 document.write("-->") 不能按预期工作？

Question

<p>hello</p>
<script type="text/javascript">
document.write("<!--");
</script>
<p>world</p>
<script type="text/javascript">
document.write("-->");
</script>
<p>nihao</p>

我认为这段 HTML 的输出是

hello
nihao

但结果如下：

hello
");
nihao

我应该如何达到我的预期？这里有什么问题？

Answer 1

好吧，第一个 JavaScript 元素被执行，导致如下表示：

<p>hello</p>
<!--
<p>world</p>
<script type="text/javascript">
document.write("-->");
</script>
<p>nihao</p>

因此，您刚刚将 HTML 注释开始添加到下一个 JavaScript 元素中，结果输出与您描述的一样。要回答您的第二个问题，以下有什么问题？

<p>hello</p>
<script type="text/javascript">
document.write("<!--<p>world</p>-->");
</script>
<p>nihao</p>

Answer 2

这是因为<!--在 JavaScript 运行之前，您的 javascript 中的 被解析为注释的开头。

Answer 3

有一些有用的答案，但如果您真的想创建评论并将其插入到您的文档中，那么您需要使用该createComment()功能：

var comment = document.createComment("This is a comment") 
​document.appendChild(comment);​

将输出：

<!--This is a comment-->

Answer 4

要获得您期望的准确结果：

<p>hello</p>
<script id="ahh" type="text/javascript">
document.write("<!"+"--"+"<p>world<p>--"+">");
document.getElementById('ahh').remove()
</script>
<p>nihao</p>​

无论如何，这是一个非常糟糕的主意。

Answer 5

如果您像我一样遇到这个问题，希望在启用 JavaScript 时隐藏元素，请考虑改用<noscript>标签！