For a little program that outputs some XML Code in a p element I need to have some line breaks in the output. In the last week I tried a lot of things like document.createElement("br"); or inserting escape character \n or unicode whitespace-character \u000A but nothing worked.

My output now:

<viva:form rdf:parseType="Resource"> <viva:title>55</viva:title>

I need it that way:

<viva:form rdf:parseType="Resource">
  <viva:title>55</viva:title>

My code:

var vivaTitle;
function elementeAbrufen() {
    vivaTitle = document.getElementById("inputVivaTitle").value;
    var p = document.createElement("p");
    var t = document.createTextNode(headErzeugen());
    p.appendChild(t);
    document.body.appendChild(p)
}

function headErzeugen() {
  // insert unicode lf
    var lf = "\u000A";
    var xmlHeadStruktur = "<viva:form rdf:parseType=\"Resource\">";
    var xmlHeadTitle = "<viva:title>" + vivaTitle + "</viva:title>";
    return xmlHeadStruktur + lf + xmlHeadTitle
}

    <p id="vivaTitle" title="">viva:title: 
        <input type="text" id="inputVivaTitle" value="">
    <button onclick="elementeAbrufen()">send</button>

For a little program that outputs some XML Code in a p element I need to have some line breaks in the output. In the last week I tried a lot of things like document.createElement("br"); or inserting escape character \n or unicode whitespace-character \u000A but nothing worked.

My output now:

<viva:form rdf:parseType="Resource"> <viva:title>55</viva:title>

I need it that way:

<viva:form rdf:parseType="Resource">
  <viva:title>55</viva:title>

My code:

var vivaTitle;
function elementeAbrufen() {
    vivaTitle = document.getElementById("inputVivaTitle").value;
    var p = document.createElement("p");
    var t = document.createTextNode(headErzeugen());
    p.appendChild(t);
    document.body.appendChild(p)
}

function headErzeugen() {
  // insert unicode lf
    var lf = "\u000A";
    var xmlHeadStruktur = "<viva:form rdf:parseType=\"Resource\">";
    var xmlHeadTitle = "<viva:title>" + vivaTitle + "</viva:title>";
    return xmlHeadStruktur + lf + xmlHeadTitle
}

    <p id="vivaTitle" title="">viva:title: 
        <input type="text" id="inputVivaTitle" value="">
    <button onclick="elementeAbrufen()">send</button>

I'm thankfull for every help. Cheers, Didier

• javascript

2 Answers 2

Using \n works fine. Here's a jsfiddle:

https://jsfiddle.net/Lftqy9b0/1/

var text = document.createTextNode("Hello\u000aWorld");

document.body.appendChild(text);
document.body.style = "white-space: pre;"

'\n', '\u000a', etc. should all be valid, but I recommend using '\n'. Most people will recognize it better.

The reason this isn't working for you is that HTML collapses all whitespace. So even though the text node DOES contain a newline, it's just the same as a newline typed into HTML (those are text nodes too.)

You can see in the above snippet that I included a 'white-space: pre;' rule. This causes it not to collapse whitespace. See here for more options:

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

If you're formatting raw text for display like this, that's probably the easiest way. Of course, you should put the white-space rule in a separate css file.

Does this work?

var t = document.createTextNode(headErzeugen() + '<br />');