javascript - CSSを使用せずに動的に追加されたJavaScript DOM要素に空白を保持する方法は?

Question

位置合わせのために小さな空白を追加したテキストを追加する場合、空白は削除されます (空白は c# で追加されるため、Javascript のフロントエンドに到達するまでには編集できません。CSS を使用してこれを行いますが、オプションではありません)。

これが私がこれまでに試したことです：

var zlp = document.getElementById("testDiv")
zlp.innerHTML = "hello                hello"
var zzz = document.createTextNode("hello                hello")
zlp.appendChild(zzz)

<div id="testDiv"></div>

どちらも を生成しhello helloます。

Answer 1

空白文字は通常、HTMLでは折りたたまれています（デフォルト）。

 次のエンティティに置き換えることができます。

var text = text.replace(/\s/g, ' ');

\sスペース、タブ、改行などの空白文字と一致します。スペースのみを交換したい場合は、/ /g代わりに使用してください。

文字列操作を回避するその他のオプション：

• テキストをpre要素に入れます。
• @Esailijaが指摘したように、CSS2white-spaceプロパティをに設定します。CSSプロパティはいつでも要素に動的に追加できます。スタイルシートで指定する必要はありません。pre

Answer 2

HTMLでは空白が折りたたまれています。これはJSの問題ではなく、HTMLドキュメントに手動で入力した場合にも同じことが起こります。スペースを＆nbsp;に置き換える必要があります。

zlp.innerHTML = "hello                hello".replace( / /g, " " );

Answer 3

使用する  

zlp.innerHTML = "hello     hello";

他のみんなのようにちょうど言った。