JavaScript: Ausgabesymbole und Sonderzeichen

Question

Ich versuche, einige Symbole mit JavaScript in ein Div einzufügen.
Es sollte so aussehen: x ∈ ℝ, aber alles was ich bekomme ist: x ∈ ℝ.

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

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

Ich hatte document.getElementById("something").innerHTML="x ∈ ℝ" versucht, und es hat funktioniert, so dass ich habe keine Ahnung, warum createTextNode Methode nicht.

Was soll ich tun, um das Richtige auszugeben?

Answer 1

Sie fügen HTML-Escapes ("Entities") in den Text ein, der benötigt wird. Nach der Dokumentation für createTextNode:

data ist eine Zeichenfolge, die die Daten enthält

im Textknoten gesetzt werden

Das ist es. Es sind die Daten, die in den Textknoten eingegeben werden sollen. Die DOM spec ist genauso klar:

Erstellt einen Text-Knoten mit der angegebenen Zeichenfolge.

Sie möchten Unicode in diese Zeichenfolge einschließen. Um Unicode in eine JavaScript-Zeichenfolge aufzunehmen, verwenden Sie Unicode escapes im Format \uXXXX.

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

Oder Sie könnten einfach schließen die tatsächlichen Unicode-Zeichen und vermeiden alle Mühe:

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

In diesem Fall nur sicherstellen, dass die JS-Datei als UTF-8 serviert wird, sind Sie Speichern der Datei als UTF-8 usw.

Der Grund dafür, dass die Einstellung .innerHTML mit HTML-Entities funktioniert, ist, dass der Inhalt als HTML gesetzt wird, dh er interpretiert ihn als HTML, einschließlich Markup, spezielle Entities, etc Es kann leichter sein, dies zu verstehen, wenn man bedenkt die Differenz zwischen dem folgenden:

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

Die ersten erstellt eine Textknoten mit dem Literalen"<div>foo</div>". Die zweite setzt den Inhalt des neuen Elements wörtlich auf "<div>foo</div>". Die dritte erzeugt andererseits ein tatsächliches div Element innerhalb des neuen Elements, das den Text "foo" enthält.

Answer 2

document.createTextNode wird automatisch die benötigten Zeichen html-escape.Sie haben diese Texte als JavaScript-Strings zur Verfügung zu stellen, entweder entkommen oder nicht:

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

EDIT: Es ist nicht wahr, dass die createTextNode Funktion hier tatsächlich html tun zu entkommen, da es nicht der Fall ist müssen. @deceze hat eine sehr gute Erklärung über die Verbindung zwischen dom und html gegeben: html ist eine textuelle Repräsentation des dom, so dass Sie kein HTML-bezogenes Escaping benötigen, wenn Sie das dom direkt manipulieren.

Answer 3

Jedes Zeichen hat einen hexadezimalen Namen (z. B. 0211D). wenn Sie es in eine HTML-Entität zu transformieren möchten, fügen Sie &#x =>ℝ oder den Namen Einheit ℝ oder das Dezimalsystem Namen ℝ verwenden, die alle hier gefunden werden kann: http://www.w3schools.com/charsets/ref_html_entities_4.asp

Aber wenn Sie JavaScript verwenden, um das zu machen, Browser verstehen, dass Sie ein Unicode-Symbol und keine Zeichenfolge ausgeben möchten, sind Escape-Entitäten erforderlich. Fügen Sie dazu \u vor dem hexadezimalen Namen =>\u211D; hinzu.