Тег <span>
Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table> , <p> или <div> , с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p> ) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
HTML тег <span>
Тег <span>, также как и тег <div> является универсальным пустым контейнером, однако в отличие от блочного элемента <div>, строчный элемент\<span> определяет отдельные строки, символы или другие строчные элементы для их последующего оформления с помощью CSS стилей, либо для манипулирования ими при помощи скриптов. Тег <span> может быть использован, когда необходимо:
- выделить какой-либо участок текста цветов, определить для него фон или фоновое изображение
- изменить шрифт отдельных слов или фраз
- применить скрипты к определенным участкам текста, например, подсветить синтаксис кода и т.д.
Чтобы не задавать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для идентификации тега использовать атрибуты class или id с именем селектора.
Тег <span> не оказывает никакое влияние на визуальное оформление элементов и не имеет семантического значения.
Синтаксис
Тег <span> — парный, его содержимое пишется между открывающим (<span>) и закрывающим (</span>) тегами.
Пример
Результат
В этом примере мы задали стиль непосредственно в теге.
Пример
Результат
В этом примере мы добавили к тегу атрибут class , и отдельно задали стили для содержимого тега.
Как изменить текст элемента span в JavaScript
Как использовать JavaScript для изменения » hereismytext «на»newtext»?
10 ответов
редактировать Для современных браузеров :
используя innerHTML is ТАК НЕ РЕКОМЕНДУЕТСЯ. Вместо этого следует создать textNode. Таким образом, вы» привязываете » свой текст, и вы не уязвимы, по крайней мере, в этом случае, для атаки XSS.
дополнительные сведения об этой уязвимости: межсайтовые Скрипты (XSS) — OWASP
отредактировано 4 ноября 2017:
доработанная третья строка кода согласно @mumush предложение: «используйте appendChild (); вместо».
Кстати, согласно @Jimbo Jonny я думаю, что все должно рассматриваться как пользовательский ввод, применяя принцип безопасности по слоям. Таким образом, вы не встретите никаких сюрпризов.
EDIT: это было написано в 2014 году. Вы, вероятно, больше не заботитесь о IE8 и можете забыть об использовании innerText . Просто используйте
Я использую Jquery и ничего из вышеперечисленного помогло, я не знаю, почему, но это работает:
вот еще один способ:
свойство innerText будет обнаружено Safari, Google Chrome и MSIE. Для Firefox стандартным способом было использовать textContent, но с версии 45 у него тоже есть свойство innerText, как кто-то любезно сообщил мне недавно. Это решение проверяет, поддерживает ли браузер одно из этих свойств, и если да, назначает «newtext».
Как и в другом ответе,innerHTML и через свойство innerText не рекомендуется, лучше использовать textContent. Этот атрибут хорошо поддерживается, вы можете проверить это: http://caniuse.com/#search=textContent
это выберет dom-узел с id myspan и измените его текстовое содержимое на new text
в дополнение к чистым ответам javascript выше, вы можете использовать jQuery текст метод следующим образом:
Если вам нужно расширить ответ, чтобы получить/изменить HTML-код содержимое span или div-элементов, вы можете сделать это: