JavaScript：出力記号と特殊文字

Question

JavaScriptを使用してdivに記号を挿入しようとしています。
これは次のようになります。x ∈ ℝですが、得られるのはx ∈ ℝです。

var div=document.getElementById("text"); 
 
var textnode = document.createTextNode("x ∈ ℝ"); \t \t \t \t \t 
 
div.appendChild(textnode);

<div id="text"></div>

私はdocument.getElementById("something").innerHTML="x ∈ ℝ"を試していたし、それが働いていたので、はcreateTextNodeメソッドはしなかった理由を私は見当もつかない。

正しいことを出力するにはどうすればよいですか？

Answer 1

HTMLエスケープ（エンティティ）をテキストにする必要があります。 createTextNodeのためのドキュメントによると：

dataは、それだテキストノード

に入れるべきデータを含む文字列です。これは、テキストノードに配置されるデータです。 DOM specも同様です。

指定された文字列を指定してTextノードを作成します。

この文字列にUnicodeを含める必要があります。 JavaScript文字列にUnicodeを含めるには、\uXXXXの形式でUnicode escapesを使用します。

var textnode = document.createTextNode("x \u2208 \u211D"); 

それとも、あなたは単に、実際のUnicode文字が含まれており、すべての問題を避けることができます：ちょうどあなたは、JSファイルはUTF-8を務めていることを確認してください、この場合、

var textnode = document.createTextNode("x ∈ ℝ"); 

をファイルをUTF-8などで保存する

.innerHTMLをHTMLエンティティで使用する理由は、コンテンツをHTMLとして設定するため、マークアップ、特殊エンティティなどを含めてHTMLとして解釈されるためですこれを理解する方が簡単かもしれません。以下の差：

document.createTextNode("<div>foo</div>"); 
document.createElement("div").textContent = "<div>foo</div"; 
document.createElement("div").innerHTML = "<div>foo</div>"; 

最初リテラル文字"<div>foo</div>"とテキストノードを作成します。 2番目の要素は、新しい要素の内容を文字どおり"<div>foo</div>"に設定します。一方、3番目の要素は、テキスト"foo"を含む新しい要素内に実際のdiv要素を作成します。

Answer 2

document.createTextNodeは、必要な文字を自動的にhtmlエスケープします。あなたは、どちらかがエスケープか、JavaScriptの文字列としてこれらのテキストを提供する必要があります。

document.body.appendChild(document.createTextNode("x ∈ ℝ")); 
 
document.body.appendChild(document.createElement("br")); 
 
document.body.appendChild(document.createTextNode("x \u2208 \u211d"));

EDIT：それはそうでないようcreateTextNode機能がここに脱出実際のHTMLを尽くすことは事実ではありません必要があります。 @decezeは、domとhtmlの間の接続について非常に良い説明を与えました.htmlはdomのテキスト表現なので、domを直接操作するときにはHTML関連のエスケープは必要ありません。

Answer 3

すべての文字は16進数の名前です（たとえば、0211D）。 JavaScriptを使用するときにするために、http://www.w3schools.com/charsets/ref_html_entities_4.asp

しかし：あなたは、HTMLエンティティに変換し&#x =>ℝを追加したり、エンティティ名ℝまたはすべてここに見つけることができ小数点名ℝを使用する場合ブラウザでは、文字列ではなくユニコード記号を出力することを理解しているので、エスケープエンティティが必要です。これを行うには、16進数=>\u211D;の前に\uを追加します。