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>
3 answers
solution1
5 ACCPTED 2017-06-12 14:01:10
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 <br> , 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.
solution2
0 2017-06-12 14:07:44
I suggest you to use <br> 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.
solution3
0 2019-06-21 17:08:25
The fact that your line shows without the \\n s in it is evidence that you are actually inserting new lines and not literal \\ s and n s. 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 <br /> 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 <p></p> 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.