无法在 JavaScript 中插入换行符答案

【问题标题】：Cannot insert newline in JavaScript无法在 JavaScript 中插入换行符
【发布时间】：2020-10-24 09:38:11
【问题描述】：

如何在 JavaScript 中插入换行符？即使在 for 循环中使用换行符，下面的代码也会在一行中显示所有内容

function isEven(number)
{
    if (number % 2 == 0)
        return 1;
    else
        return 0;
}

for (let i=0;i<=30;i++)
{
    if (isEven(i) == 1)
    {
        document.write(i + " even\n");

    }
    else {
        document.write(i + " odd\n");

    }

}

【问题讨论】：

在 HTML 页面中输出换行符不会在 HTML 文档中引入新行。改用

标签： javascript numbers character newline

【解决方案1】：

由于您使用的是document.write，因此您应该使用<br>: The Line Break element：

function isEven(number)
{
    if (number % 2 == 0)
        return 1;
    else
        return 0;
}

for (let i=0;i<=30;i++)
{
    if (isEven(i) == 1)
    {
        document.write(i + " even<br>");

    }
    else {
        document.write(i + " odd<br>");

    }

}

【讨论】：

我认为答案不应该促进不良做法。 OP显然是初学者，似乎使用过时的材料。简单地回答问题而不指出不应使用 document.write 是严重疏忽。

【解决方案2】：

您可以尝试使用方法console.log(); 而不是document.write();

【讨论】：

【解决方案3】：

我会在不使用 document.write 的情况下执行此操作 - 我将创建一个 ul 并构建一个包含所有 li 的字符串，并确定每个 li 是否为奇数；/偶数。然后将该字符串插入到 ul 的 innerHTM 中。这样做的好处是您只需更改一次 DOM - 而不是每次迭代，并且使用 li 消除了换行的需要，因为 li 已经是块级元素。

我还将简化奇数/偶数检查逻辑，以根据成为选项索引的模运算符返回文本。

function isEven(number) {
 const options = ['odd', 'even'];
 return options[number % 2];
}

let listStr = '';

for (let i=0;i<=30;i++) {
 listStr += '<li>' + i + ' - '  + isEven(i) + '</li>';
}

document.querySelector('#results').innerHTML = listStr;

#results {
  list-style: none;
}

&lt;ul id="results"&gt;&lt;/ul&gt;

【讨论】：

【解决方案4】：

使用document.write 通常被认为是不好的做法，您根本不应该使用它。

在您的情况下，您可以创建一个 html 字符串，然后将其附加到文档正文（或任何您想要的结果）。

就像妈妈说的：你需要使用一个<br>标签，浏览器将其呈现为换行符。

我们使用Element.insertAdjacentHTML 将html代码插入到正文中。

let html = "";

for (let i=0;i<=30;i++)
{
    if (isEven(i) == 1)
    {
        html += i + " even<br>";

    }
    else {
        html += i + "  odd<br>";

    }

}
document.body.insertAdjacentHTML("beforeend", html);

【讨论】：