Why doesn’t JavaScript newlines work inside HTML?

A

13

16

I have the following:

<html>
  <body>
    <script type="text/javascript">
      document.write('Hello\nWorld')
    </script>
  </body>
</html>

As you probably all know, \n doesn’t work and I have to use   instead. It won’t work either if I link to an external .js file. Here are my questions:

Why doesn’t \n work?
Why does   even work? Shouldn’t everything that’s inside the script tags be strictly JavaScript instead of a dirty mix between HTML and JS?
Is it possible to make \n work somehow?
I know \t doesn’t work either. Any other stuff that won’t work inside HTML files?
Unrelated question (I didn’t want to open a new question just for this): I installed Node.js to be able to try out JS scripts from inside vim but when I run this script I get the error "document is not defined". Same thing happens when I try from the REPL. Any ideas?

When searching for similar questions, all I got was that I should use   instead of \n.

Angulate answered 25/4, 2011 at 19:39 Comment(0)

V

9

\n works. If you have a debugger of sorts (or similar developer tool), you can see the document source, and you will see that there is indeed a newline character. The problem is the way you are looking at the page: you’re not reading its source, you’re reading it as an HTML document. Whitespace in HTML is collapsed into a single space. So when you change the source, it does indeed change, although when interpreted as an HTML document, that change isn’t shown.

Your Node.js error is most probably caused by the fact that you’re running browser scripts on the server. I.e. scripts that refer to the document are intended to be run in a browser, where there is a DOM etc. Although a generic node process doesn’t have such a global object because it isn’t a browser. As such, when you try and run code that references a global object called document on the assumption that it exists just like in the browser, it will throw an error. document.write doesn’t exist; if you want to write to the screen, try console.log or look into the other util functions.

Voguish answered 25/4, 2011 at 19:48 Comment(0)

C

36

I had:

<div>Hello\nworld</div>

I added the below css to div class and it's working now:

div {
      white-space: pre-wrap;
  }

I hope this solve your problem too.

Chatterer answered 26/7, 2020 at 12:44 Comment(1)

Similarly, using pre-wrap works fine for strings or dynamic data. Thanks. – Monolith 7/7 at 9:19

V

22

Why doesn’t \n work?

Because white space is just white space in HTML.

Why does   even work?

Because it is the HTML for a line break

Shouldn’t everything that’s inside the script tags be strictly JavaScript instead of a dirty mix between HTML and JS?

That’s subjective. document.write is considered dirty by many as well.

You can always use createElement and createTextNode

Is it possible to make \n work somehow?

<pre>, white-space

I know \t doesn’t work either. Any other stuff that won’t work inside HTML files?

HTML is not plain text. Listing all the differences would be time-consuming, and out of scope for Stack Overflow. Try reading the specification.

Unrelated question (I didn’t want to open a new question just for this)

It is completely unrelated. Open a new question.

Venessavenetia answered 25/4, 2011 at 19:52 Comment(0)

V

9

\n works. If you have a debugger of sorts (or similar developer tool), you can see the document source, and you will see that there is indeed a newline character. The problem is the way you are looking at the page: you’re not reading its source, you’re reading it as an HTML document. Whitespace in HTML is collapsed into a single space. So when you change the source, it does indeed change, although when interpreted as an HTML document, that change isn’t shown.

Your Node.js error is most probably caused by the fact that you’re running browser scripts on the server. I.e. scripts that refer to the document are intended to be run in a browser, where there is a DOM etc. Although a generic node process doesn’t have such a global object because it isn’t a browser. As such, when you try and run code that references a global object called document on the assumption that it exists just like in the browser, it will throw an error. document.write doesn’t exist; if you want to write to the screen, try console.log or look into the other util functions.

Voguish answered 25/4, 2011 at 19:48 Comment(0)

G

3

When HTML renders, it ignores whitespace. Thus the only way is to use line breaks.

Use   instead of \n and it will work fine

The document.write() function writes HTML into the element.

Grivet answered 25/4, 2011 at 19:42 Comment(0)

T

3

Use <pre></pre> on the html and it will respect the text format from JS.

Tease answered 18/8, 2018 at 22:13 Comment(0)

S

2

When you write to the page, you're not writing JavaScript; you're writing HTML. \n is a special "line feed" character that doesn't create a line break in the browser's rendering of the HTML. It WILL create a line break in the HTML file itself, but the browser doesn't take this into consideration when it renders out the markup.

Thus, the br tag is required.

Superannuate answered 25/4, 2011 at 19:41 Comment(0)

R

2

Use the html tag   to input line endings (your output is interpreted by an html parser), for example:

Javascript:

document.write("Hello<br/>World");

Redletter answered 25/4, 2011 at 19:41 Comment(0)

R

-1

Whitespace emitted by JavaScript works like any other whitespace in your HTML file. That seems the expected behavior to me.

Rugen answered 25/4, 2011 at 19:42 Comment(0)

A

-1

1) \n works in plain text files.

2)   works because you are doing HTML in string. Strings can hold characters without breaking the rest of the JS script.

3) Not really. Perhaps when you are using <textarea>s.

4) Most other \*'s

5) More info needed.

Abhor answered 25/4, 2011 at 19:44 Comment(0)

N

-1

1,3. "\n" does work. If you do a document.write inside the body tag you can check document.body.innerHTML and see that the line break is indeed there.

4.Anything HTML specific will be rendered HTML specific, so you will have to escape < and > into < and > for instance.

5.document is an object available in browsers, it is not used in node since the DOM doesn't exist there. require("sys"); and use sys.print in nodejs.

Now answered 25/4, 2011 at 19:49 Comment(0)

O

-1

The document object represents an HTML document; any text written to the document will be processed by the browser's HTML renderer. In HTML, all adjacent whitespace, including line breaks (e.g., "\n"), are collapsed into a single space when rendered. This is why you need  , which is rendered as a line break. You can make \n work by replacing it with   or by writing into a <pre> element:

Hello
World

Otherdirected answered 25/4, 2011 at 19:50 Comment(0)

I

-2

Actually your code is works. When you run it on browser console like Firefox, it will show you:

<html><head></head><body>
    <script type="text/javascript">
      document.write('Hello\nWorld')
    </script>Hello
World

</body></html>

Note on the Hello and World that is separated.

But when displayed on HTML, line break (whitespace) will be ommited.

To display "as is", you may surround the javascript with PRE tag, like:

<html>
  <body>
    <pre>
    <script type="text/javascript">
      document.write('Hello\nWorld')
    </script>
    </pre>
  </body>
</html>

You will get your line break displayed on HTML.

Icarus answered 25/4, 2011 at 19:51 Comment(0)

B

-2

Everyone has said what it was to be said but in case if you are using firebug/chrome Javascript console ..then try this >

console.log("Hello\nWorld");

This is the key difference. When you are printing something in HTML, the HTML rules apply. Elsewhere you can see the line breaks work.

Benildas answered 25/4, 2011 at 21:16 Comment(0)

Recommended topics

Hot tags