在字符串javascript中插入换行符
Posted
技术标签:
【中文标题】在字符串javascript中插入换行符【英文标题】：Insert newline character in string javascript 【发布时间】：2017-11-14 00:56:37 【问题描述】：如何在 javascript 中插入换行符？即使使用换行符“\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>【问题讨论】：
因为在 HTML 中，换行是使用<br>完成的
在这里阅读更多关于<br>标签=> developer.mozilla.org/en/docs/Web/HTML/Element/br
即这与 JavaScript 无关，它是 HTML 的工作原理。
Add a "new line" in innerHTML的可能重复
【参考方案1】：
innerHTML
如果在 HTML 源代码中添加换行符会怎样？
New
Line!这是一个 HTML 问题。不是 JavaScript 问题。
如果你想在 HTML 中换行，那么你需要添加适当的元素。
快速而肮脏的解决方案是<br>，或者将整个内容包装在<pre>...</pre> 中，但您的内容的正确标记可能是列表或其他内容。您的示例代码太笼统，无法分辨。
【讨论】：
【参考方案2】：我建议你使用<br>标签而不是“\n”。
https://jsfiddle.net/nav8kdg6/
您也可以访问此主题，它是一个 HTML 主题，但与您的问题相同：Line break in html with `\n`。
希望对你有帮助。
【讨论】：
【参考方案3】：您的行显示没有\ns 的事实证明您实际上是在插入新行而不是文字\s 和ns。因此，您的代码正在执行您期望的操作。
正如其他人所指出的，这里的问题不是 JavaScript 代码本身，而是 HTML。当您设置 innerHTML 时，您不会将文本设置为文字，而是作为页面实时 HTML 的一部分。
HTML 是一种标记语言，因此，它不会完全按照其编写的方式呈现，而是按照标记的要求呈现。在 HTML 中，空格被认为在语法上无关紧要，就像 JavaScript 和许多其他语言一样。这意味着任何空格，无论是水平的（例如空格和制表符）还是垂直的（例如换行符）都被单个空格替换。因此，您的换行符被替换为空格。
在 HTML 中强制换行的正确方法是使用 <br /> 标记，它会插入换行符。然而，最佳实践表明，HTML 更多的是使用上下文而不是样式来标记数据。可能有一个原因，您希望这些条目单独出现在行上。它们可能是唯一的条目，因此，它们可能应该位于它们自己的“块级”元素中。一个流行的例子是创建段落的<p></p> 标签。另一个示例是将<li></li> 用于列表项，例如：
<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>理想情况下，样式将在 CSS 中完成，但这说明了这个想法。这将是一种更强大的方法来添加将形成新行的元素。
【讨论】：
以上是关于在字符串javascript中插入换行符的主要内容，如果未能解决你的问题，请参考以下文章