JavaScript appendChild文本节点不会换行

Question

JavaScript n00b在这里...
我在javascript中生成了一些html代码，这些代码将通过棱镜HTML标记插件显示为代码。 单击按钮后，代码会动态添加到<pre>标记中。

我的JavaScript代码如下。 这是第2行中的文本，我需要在其中换行。 我已经试过了/ n，但是那行不通，只是一个空格。

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所在的位置。

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

Answer 1

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

通过使用String.fromCharCode(10)您可以插入一个换行符，并使用pre标签（或div带有white-space: pre-wrap ）可以看到/显示该换行符。

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

Answer 2

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

毕竟，如果您在HTML源代码中键入换行符，结果中是否会出现空白行？ 不。 并非没有通过CSS使空白重要的地方。