为什么 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>

I thought the output of this piece of HTML is

hello
nihao

But it turns out as below:

hello
");
nihao

How should I achieve what I expected? What's the problem here?

Answer 1

Well, the first JavaScript element is executed which leads to a representation like this:

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

So the HTML comment start you just added spans into your next JavaScript element and the resulting output is just as you described. To answer your second question, whats wrong with the following?

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

Answer 2

It is because the <!-- in your javascript is parsed as the start of a comment before the JavaScript runs.

Answer 3

There have been some useful answers, but if you actually want to create a comment and insert it into your document then you need to use the createComment() function :

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

Will output:

<!--This is a comment-->

Answer 4

To get exactly result you expect:

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

anyway it is pretty bad idea.

Answer 5

If, like me, you came across this question wanting to hide an element when JavaScript is enabled, consider using the <noscript> tag instead!