JavaScript: выходные символы и специальные символы

Question

Я пытаюсь включить некоторые символы в div с помощью JavaScript.
Это должно выглядеть так: 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 так же ясно:

Создает текстовый узел с заданной строкой.

Вы хотите включить Unicode в эту строку. Чтобы включить Unicode в строку JavaScript, используйте Unicode escapes, в формате \uXXXX.

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

Или вы просто могли бы включать в себя фактический характер Unicode и избежать всех проблем:

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

В этом случае, просто убедитесь, что файл JS подается в UTF-8, вы сохраняя файл как 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>". Второй устанавливает содержание нового элемента буквально до "<div>foo</div>". С другой стороны, третий создает фактический элемент div внутри нового элемента, содержащего текст "foo".

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, поэтому вам не нужно какое-либо html-связанное экранирование при прямом манипулировании dom.

Answer 3

Каждый символ имеет шестнадцатеричное имя (например, 0211D). если вы хотите, чтобы превратить его в HTML-сущности, добавить &#x =>ℝ или использовать имя лица ℝ или десятичную имя ℝ которое можно найти все здесь: http://www.w3schools.com/charsets/ref_html_entities_4.asp

Но при использовании JavaScript, для того, чтобы сделать браузер понимает, что вы хотите вывести символ юникода, а не строку, требуемые объекты исключения. Для этого добавьте \u перед шестнадцатеричным именем =>\u211D;.