Insert newline character in string javascript

Question

How do I insert a newline character in Javascript? The below code displays everything in one line even when using the newline character "\n".

<body>
  <button onclick="myFunction()">Click me</button>
  <div id="demo" onclick="myFunction()"></div>
  <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "line1\nline2\nline3\nline4\nline5\nline6";
    }
  </script>
</body>

Read more about ```
``` tag here => https://developer.mozilla.org/en/docs/Web/HTML/Element/br — kkaosninja, Jun 12 '17 at 14:00
I.e. this has nothing to do with JavaScript, it's how HTML works. — Felix Kling, Jun 12 '17 at 14:01
Possible duplicate of [Add a "new line" in innerHTML](https://stackoverflow.com/questions/19438895/add-a-new-line-in-innerhtml) — Dennis Rasmussen, Jun 12 '17 at 14:03

score 5 · Accepted Answer · answered Jun 12 '17 at 14:01

innerHTML

What happens if you put a new line character in HTML source code?

New
Line!

This is an HTML issue. Not a JavaScript issue.

If you want a new line in HTML, then you need to add appropriate elements.

The quick and dirty solution would be  , or wrapping the whole thing in a <pre>...</pre>, but the correct markup for your content might be a list or something else. Your example code is too generic to tell.

score 2 · Answer 2 · answered Jun 12 '17 at 14:07

2

I suggest you to use   tag instead of "\n".

https://jsfiddle.net/nav8kdg6/

You can visit this topic too, it's an HTML subject but it's the same thing for your issue: Line break in html with `\n`.

I hope i helped you.

answered Jun 12 '17 at 14:07

Ellundril

21
2

score 1 · Answer 3 · answered Jun 21 '19 at 17:08

The fact that your line shows without the \ns in it is evidence that you are actually inserting new lines and not literal \s and ns. Therefore, your code is doing what you expect.

As others have pointed out, the problem here isn't the JavaScript code itself, but the HTML. When you're setting innerHTML, you aren't setting text as if it were literal, but as part of the page's live HTML.

HTML is a markup language, and as such, it doesn't render exactly as it is written, but as the markup dictates. In HTML, whitespace is considered to be syntactically insignificant, as is the case with JavaScript and many other languages. That means that any whitespace, whether horizontal (such as spaces and tabs) or even vertical (such as newlines) are all replaced by a single space. Therefore, your newlines are replaced with spaces.

The proper way to force a new line in HTML is with the   tag, which inserts a line break. However, best practices say that HTML is more about marking up data with context rather than style. There is probably a reason that you want these entries on lines by themselves. They are likely unique entries, and as such, they should probably be inside of their own "block level" elements. One popular example would be the  tags that create paragraphs. Another example would be to use <li></li> for list items, as such:

    <body>
        <button onclick="myFunction()">Click me</button>
        <div id="demo" onclick="myFunction()"></div>
        <script>
            function myFunction() {
                var list = document.createElement("ul");
                list.style.listStyleType = "none";
                for (var i=1; i <= 6; i++) {
                    var item = document.createElement("li");
                    item.appendChild(document.createTextNode("line" + i));
                    list.appendChild(item);
                }
                document.getElementById("demo").appendChild(list);
            }
        </script>
    </body>

Ideally, the styling would be done in CSS, but this shows the idea. This would be a more robust approach to adding the elements which will form the new lines.

Insert newline character in string javascript

3 Answers3