новая линия в 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"));