Почему текст попадает внутрь тега?

Question

[motomac]

Генерирую html через Javascrip примерно следующим образом:

html += '<i class="wi wi-yahoo-'+weather.code+'"></i>';
html += ' '+weather.temp+'° '+weather.units.temp;

Но на выходе в браузере получаю:

<i class="wi wi-yahoo-30" style="vertical-align: middle;"> 54° F</i>

Вопрос: почему "54° F" попадает внутрь тега i в то время, когда он в исходном коде располагается после? И как мне заставить его-таки встать вне тега i?

Использую иконочный шрифт weathericons.io.

Comments

[Lynn «Кофеман»]

Проверьте опечатки.

Answer 1

[YuriyIvanov]

Да нет же, все выводится правильно, тег i пустой.
https://fiddle.jshell.net/4vaz01ze/

Comments

[motomac]

Странно, но у меня в консоли браузера я вижу, что текст вставляется внутрь i. Да и стили от i применяются к тексту. Скорее всего, это из-за иконочного шрифта https://github.com/erikflowers/weather-icons, но я не знаю, как это дело исправить.

[Виталий Волович]

из описания "The icons are displayed by using an i element and adding the base class wi and then the icon class you want, such as day-sunny"
т.е для отображения использует тег i
если нужно отображать иначе чем все остальные теги i то меняем стили для класса wi

[motomac]

Виталий Волович: да, я понимаю, что i делает саму иконку, но почему он затягивает в себя и текст, написанный после нее :)

[Виталий Волович]

ничего не затягивает, все снаружи
выложите на jsfiddle пример, где получается
" 54° F"

[Виталий Волович]

*

<i class="wi wi-yahoo-30" style="vertical-align: middle;"> 54° F</i>

[motomac]

Виталий Волович: в консоли у меня вот такая красота: itmages.ru/image/view/3331441/7ae068c6

[motomac]

Разобрался. Оказывается, парсер вырезал закрывающие теги из переменных JS, а браузер услужливо их закрывал. Прошу прощения.