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

将代码更改为插入textarea或一组预标记。

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

Answer 3

我认为你可能会将空白与空白的表示混淆。在您的情况下，您将表示空格的字符附加到您打算显示为换行符的字符串。我假设你将它附加到一个元素，它的样式没有设置为显示为空格。

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

1. 使用ordered list。如果可以的话，这样做，因为它既是结构性的，也是语义的。请注意，该链接显示了如何控制列表项文本（控制起始编号更具挑战性）。
2. 如果container引用的元素符合此要求，请将white-space: pre添加到其样式中。这将导致您的换行符进入视图。最好使用CSS执行此操作，但您也可以使用Javascript执行此操作。
3. 将\n替换为<br>。 DenysSéguret就是一个例子。
4. 对pre引用的元素使用container标记。 <pre>会自动尊重并显示内容中的换行符。这当然意味着您的内容可以使用pre格式的标记。