createTextNodeに改行を挿入する方法

Question

p要素にXMLコードを出力する小さなプログラムでは、出力に改行が必要です。 先週、私はdocument.createElement（ "br"）のようなものをたくさん試しました。エスケープ文字\ nまたはユニコード空白文字\ u000Aを挿入しても何も効果がありません。今

マイ出力：

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

マイコード：

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

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

私はそのように必要としますすべての助けに感謝しています。 Cheers、Didier

Answer 1

\ nがうまくいきます。ここにjsfiddleです：

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

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

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

'\ n' は、 '\ u000a' などはすべて有効であるが、私は '\ n' を使用することをお勧めしなければなりません。ほとんどの人がそれをより良く認識します。

これがうまくいかない理由は、HTMLがすべての空白を崩壊させるからです。したがって、テキストノードに改行が含まれているにもかかわらず、改行がHTMLに入力された改行と同じです（これらもテキストノードです）。

上記のスニペットでは、 'white-space：pre ; 'ルール。これにより、空白が崩れないようにします。より多くのオプションについてはこちらをご覧ください：

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

あなたは、このような表示のための生のテキストの書式を設定している場合、それはおそらく最も簡単な方法です。もちろん、空白のルールを別のCSSファイルに入れる必要があります。

Answer 2

これは機能しますか？

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