Why document.write("-->") does not work as expected?

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?

I can't give you a rational reason why it doesn't work, but this feels so *wrong* — Pekka, Dec 09 '12 at 21:24

score 8 · Accepted Answer · answered Dec 09 '12 at 21:30

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>

score 5 · Answer 2 · answered Dec 09 '12 at 21:24

5

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

answered Dec 09 '12 at 21:24

Ted Hopp

232,168
48
399
521

1

But isn't his problem that it's *not* parsed as the start of a comment? – Pekka Dec 09 '12 at 21:25
I think that was intentional. – Jivings Dec 09 '12 at 21:26
2

This answer now makes sense :) Sorry. – Jivings Dec 09 '12 at 21:29
It is only parsed as a comment before the JS runs if the document is served as `application/xhtml+xml` and there is no suggestion that it is. If it was parsed as a comment before the JS ran, then it wouldn't render the `");` – Quentin Dec 09 '12 at 23:12

score 5 · Answer 3 · answered Dec 09 '12 at 21:32

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-->

score 2 · Answer 4 · answered Dec 09 '12 at 21:31

2

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.

answered Dec 09 '12 at 21:31

zb'

8,071
4
41
68

score 0 · Answer 5 · answered Nov 07 '20 at 22:56

0

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

answered Nov 07 '20 at 22:56

ianh

836
1
5
15

Why document.write("-->") does not work as expected?

5 Answers5