幅の空白スペースがゼロに設定されているテキストノードを挿入できないのはなぜですか？

Question

JSを使用して空白テキストノードを挿入しようとしていますが、単純に機能しません。 TextNodeの場合、innerHtmlプロパティは無視されますか？

私JSFiddle

insertWhitespace = function() { 

    var contentEditable = document.getElementById("txt"); 
    var element = document.getElementById("annyoing-html"); 

    var textNodeLeft = document.createTextNode(""); 
    var textNodeRight = document.createTextNode(""); 

    textNodeLeft.innerHtml = "​"; 
    textNodeRight.innerHtml = "​"; 

    contentEditable.insertBefore(textNodeLeft, element); 

    if(element.nextSibling != null) {  
    contentEditable.insertBefore(textNodeRight, element.nextSibling); 
    } else { 
    element.appendChild(textNodeRight); 
    } 
}; 

を参照してください。私は実際にはゼロの空白文字を挿入する計画が、それはともかく、このように働いていません。

このようなテキストノードを挿入するにはどうすればよいですか？

Answer 1

Textノードは.innerHTMLプロパティ（NBを持っていませんケース）

は、最も簡単な解決策は、あなたが要素を作成するときに、単にのUnicodeリテラルとして適切なコンテンツを指定するには、次のとおりです。

var textNodeLeft = document.createTextNode("\u200b"); 
var textNodeRight = document.createTextNode("\u200b"); 

Answer 2

はい、テキストノードには.innerHTMLプロパティがありません。 HTMLElementsだけが行います。 だから、これは動作します：

var textNodeLeft = document.createElement("span"); 
textNodeLeft.innerHTML = "    "; 

Answer 3

HTMLエンティティ（&entity; -formatted文字列が）HTMLのために、衝撃的な、です。

JavaScriptの場合は、JavaScriptエスケープシーケンスを使用する必要があります。この場合

、\xA0

で改行なしスペースは、しかし、それは人為的にスペースを作成するために一緒にチェーンNBSPsに非常に悪い習慣です。あなたは、マージン、パディング、ポジショニングを使用する必要があります...何か、それはCSSの限り。スペースはプレゼンテーションの一部であり、プレゼンテーションはCSSの仕事です。

空白を有効にするためにコンテナのCSSをwhite-space: pre-wrapを含むように設定していれば、完全なスペース（" "）を使用できます。

Answer 4

 は、HTMLエンティティです。 テキストノードにはHTMLを入力しないでください。

したがって、テキストノードに「非破壊空白」（ ）を埋めるために、あなたはそのUnicodeの文字コードを使用することができます注：

var textNode = document.createTextNode("\xA0"); 
// or 
var textNode2 = document.createTextNode(""); 
textNode2.data = "\xA0"; // or 
textNode2.textContent = "\xA0";