Javascript 添加换行符，\n 不起作用

Question

我想在 Javascript 中添加一个换行符，但 \n 不起作用，而且我目前发现的其他任何东西都不起作用（例如 <br> 或 \n）。另外，由于编程原因我不能使用 .appendChild.

for (i=getchilds();i<number;i++){
     container.appendChild(document.createTextNode("\n" + "Pers. " + (i+1) + " \u00a0"));
     var input = document.createElement("input");
     input.type = "number";
     container.appendChild(input);
}

Answer 1

您无法在文本节点中插入 \n 并在具有标准 white-space 呈现的元素中正确呈现它们。

这里有两个解决方案：

插入`<br>`个元素

container.appendChild(document.createElement("BR"));
container.appendChild(document.createTextNode("Pers. " + (i+1) + " \u00a0"));

在 SPAN

中使用 innerText

var node = document.createElement("SPAN");
node.innerText = "\n Pers. " + (i+1) + " \u00a0";
container.appendChild(node);

第一个与您的情况最相关，但 innerText 不删除换行符这一事实（与 textContent 相反）通常很有用。

Answer 2

更改您的代码以插入文本区域或一组预标记。

您可能会看到您的代码在 Firefox chrome 或 Opera 浏览器的纯文本输入中注入单个 space 代替换行符。

Answer 3

我认为您可能将空白与空白的表示混淆了。在您的情况下，您将代表 white-space 的字符附加到您打算显示为 line-break 的字符串。我假设您随后将它附加到一个元素，该元素的样式未设置为将其显示为 white-space.

有四种基本方法可以解决此问题：

使用 ordered list。如果可以，请这样做，因为它既是结构性的又是语义性的。请注意 link 显示了如何控制 list-item 文本（控制起始编号更具挑战性）。
如果 container 引用的元素包含此内容，请将 white-space: pre 添加到它的样式中。这将使您的 line-break 进入视野。最好也用 CSS, but you can do it with Javascript 来做到这一点。
将 \n 替换为 <br>。 Denys Séguret 有一个这样的例子。
对 container 引用的元素使用 pre 标签。 <pre> 自动尊重并在内容中显示 line-breaks。这当然意味着您的内容可以使用 pre 格式的标签。

Javascript 添加换行符，\n 不起作用

Javascript add linebreak, \n not working

javascript

line-breaks

插入`<br>`个元素

在 SPAN

Javascript 添加换行符，\n 不起作用

Javascript add linebreak, \n not working

javascript

line-breaks

插入<br>个元素

在 SPAN

插入`<br>`个元素