Wie man einen Zeilenumbruch in createTextNode einfügt

Question

Für ein kleines Programm, das einige XML-Code in einem p-Element ausgibt, muss ich einige Zeilenumbrüche in der Ausgabe haben. In der letzten Woche versuchte ich eine Menge Dinge wie document.createElement ("br"); oder Einfügen von Escape-Zeichen \ n oder Unicode-Leerzeichen-Zeichen \ u000A, aber nichts hat funktioniert.

Meine Ausgabe jetzt:

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

Ich brauche es so:

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

Mein 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 Ich danke für jede Hilfe. Cheers, Didier

Answer 1

Verwendung \ n funktioniert gut. Hier ist ein jsfiddle:

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

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

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

'\ n', '\ u000a' usw. alle gültig sein sollte, aber ich empfehlen die Verwendung von '\ n'. Die meisten Menschen werden es besser erkennen.

Der Grund, warum dies für Sie nicht funktioniert, ist, dass HTML alle Leerzeichen zusammenfasst. Obwohl der Textknoten einen Zeilenumbruch enthält, ist er genauso wie ein in HTML eingegebener Zeilenumbruch (das sind auch Textknoten.)

Sie können im obigen Ausschnitt sehen, dass ich einen 'white-space: pre' eingefügt habe " Regel. Dies führt dazu, dass Leerräume nicht zusammenfallen. Sehen Sie hier für mehr Optionen:

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

Wenn Sie die Formatierung Rohtext für die Anzeige wie diese, das ist wahrscheinlich der einfachste Weg. Natürlich sollten Sie die White-Space-Regel in eine separate CSS-Datei einfügen.

Answer 2

Funktioniert das?

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