createTextNode中的新行

Question

我想在div中创建一个新段落：

我想在段落中使用新的行。我使用转义\n来转义它们，但它们正在创建新的行。我做错了什么？

var oNewP = document.createElement("p");
var oText = document.createTextNode("Harry Huy\nPresident\n283.423.6431\nharry.huy@hello.com");
oNewP.appendChild(oText);
document.body.appendChild(oNewP);

var Test = document.getElementById('Test');
Test.appendChild(oNewP);

http://jsfiddle.net/4qvydycf/4/

Answer 1

文本中的新行通常不会在HTML文档中创建新行。您使用的是JavaScript，这并不重要。其结果与使用…相同

<p>Harry Hun
President

…在HTML中。新行的处理方式与其他空格(换行符、制表符、空格)字符相同。

处理这个问题的方式与处理HTML的方式相同。以下任一项：

• 使用带有br元素的多个文本节点，然后
• 使用CSS white-space属性
• 使用缺省情况下应用white-space属性的元素(如pre).

Answer 2

\n不是HTML元素，请改用<br />元素。但是，createTextNode不会将文本呈现为HTML，因此您需要执行以下操作：

var Test = document.getElementById('Test');
Test.appendChild(document.createTextNode("Harry Huy"));
Test.appendChild(document.createNode('br'));
Test.appendChild(document.createTextNode("President"));
Test.appendChild(document.createNode('br'));
Test.appendChild(document.createTextNode("283.423.6431"));
Test.appendChild(document.createNode('br'));
Test.appendChild(document.createTextNode("harry.huy@hello.com"));

Answer 3

只需使用标签pre，并将段落与\n连接在一起，如下所示：

    var oNewP = document.createElement("pre");
    var oText = document.createTextNode("Harry 
Huy\nPresident\n283.423.6431\nharry.huy@hello.com");
    oNewP.appendChild(oText);
    document.body.appendChild(oNewP);

    var Test = document.getElementById('Test');
    Test.appendChild(oNewP);