JavaScript appendChild 文本节点不换行

Question

a JavaScript n00b 这里...
我正在 javascript 中生成一些 html 代码，这些代码将通过 prism HTML markup plugin 显示为代码。单击按钮时，代码会动态添加到

 标记中。

我的javascript代码如下。这是第 2 行中的文本，我需要换行。我试过 /n 但这不起作用它只是使 space.

var startLabelTag = document.createTextNode("text goes here");
startLabelTag.nodeValue = "<label><strong>" + elementNameFinal + "</strong></label>LINEBREAK HERE<select id='dropdownmenu' class='Custom_" + fieldNameFinal + "' onchange='selectChanged('@field[" + fieldNameFinal + "]',this.value);'>";
document.getElementById("dropdown-code").appendChild(startLabelTag);


下面是我要创建的文本字符串，在文本 LINEBREAK HERE 所在的位置换行。

<label><strong>" + elementNameFinal + "</strong></label>LINEBREAK HERE<select id='dropdownmenu' class='Custom_" + fieldNameFinal + "' onchange='selectChanged('@field[" + fieldNameFinal + "]',this.value);'>

Answer 1

将 white-space: pre-wrap 添加到容器的 CSS。

毕竟，如果您在 HTML 源代码中键入一个换行符，您会在结果中得到一个空行吗？没有。并非没有通过 CSS.

使空白有意义

Answer 2

您正在寻找这样的东西吗？

通过使用 String.fromCharCode(10) 你可以插入一个换行符并且使用 pre 标签（或者 div 有 white-space: pre-wrap）换行符将是 visible/shown.

var elementNameFinal = "elementname", fieldNameFinal = "fieldname";

var startLabelTag = document.createTextNode("text goes here");
startLabelTag.nodeValue = "<label><strong>" + elementNameFinal + "</strong></label>" + String.fromCharCode(10) + "<select id='dropdownmenu' class='Custom_" + fieldNameFinal + "' onchange='selectChanged('@field[" + fieldNameFinal + "]',this.value);'>";

document.getElementById("dropdown-code").appendChild(startLabelTag);

<pre id="dropdown-code"></pre>

旁注

您当然也可以使用 div，建议使用 CSS 规则 Niet the Dark Absol。

<div id="dropdown-code"></div>

#dropdown-code {
  white-space: pre-wrap;
}

JavaScript appendChild 文本节点不换行

JavaScript appendChild text node doesn't break line

html

javascript

line-breaks