Question

这里有一个JavaScript n00b ...
我在javascript中生成了一些html代码，它将通过prism HTML markup plugin显示为代码。代码被动态地添加到＆lt; pre＆gt;点击按钮上的标记。

我的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 HERE所在的换行符。

<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使空白显着。

JavaScript appendChild文本节点没有中断行

2 个答案: