Question

如何在Javascript中插入换行符。即使使用换行符＃34; \ n＆＃34;下面的代码也会在一行中显示所有内容。

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

Answer 1

的innerHTML

如果在HTML源代码中添加换行符，会发生什么？

＆＃13;

New
Line!

＆＃13;

这是一个HTML问题。不是JavaScript问题。

如果您想要HTML中的新行，则需要添加适当的元素。

快速而肮脏的解决方案是 ，或将整个内容包装在<pre>...</pre>中，但内容的正确标记可能是列表或其他内容。您的示例代码太通用了，无法说明。

Answer 2

我建议您使用 代码而不是“\ n”。

https://jsfiddle.net/nav8kdg6/

您也可以访问此主题，这是一个HTML主题，但对您的问题也是如此：Line break in html with `\n`。

我希望我帮助过你。

Answer 3

您的行显示为没有\n的事实表明您实际上是在插入新行，而不是文字的\和n。因此，您的代码正在执行您期望的工作。

正如其他人指出的那样，这里的问题不是JavaScript代码本身，而是HTML。设置innerHTML时，并不是像设置文字一样设置文本，而是将其设置为页面实时HTML的一部分。

HTML是一种标记语言，因此，它并不完全按照编写的方式呈现，而是按照标记的指示进行呈现。在HTML中，与JavaScript和许多其他语言一样，空格在语法上被认为是无关紧要的。这意味着任何空白，无论水平（如空格和制表符）还是垂直（如换行符）都被单个空格所代替。因此，您的换行符将替换为空格。

在HTML中强制换行的正确方法是使用 标记，该标记会插入换行符。但是，最佳实践表明，HTML更多地是关于使用上下文而不是样式标记数据。您可能需要单独输入这些条目。它们可能是唯一的条目，因此，它们可能应该在自己的“块级别”元素中。一个流行的示例是创建段落的标签。另一个示例是将<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中插入换行符

3 个答案: