Как изменить текст элемента с помощью JavaScript?
Вопрос: Как изменить текст в элементе <span>
с помощью JavaScript?
У меня есть элемент <span>
, например:
<span id="myspan"> hereismytext </span>
Как я могу с помощью JavaScript заменить текст "hereismytext" на "newtext"?
5 ответ(ов)
Для современных браузеров следует использовать:
document.getElementById("myspan").textContent = "newtext";
Хотя более старые браузеры могут не поддерживать textContent
, не рекомендуется использовать innerHTML
, так как это может привести к уязвимости XSS, если новый текст вводится пользователем (см. другие ответы ниже для более подробного обсуждения):
// ВОЗМОЖНО, НЕНАДЕЖНО, ЕСЛИ NEWTEXT СТАНОВИТСЯ ПЕРЕМЕННОЙ!!
document.getElementById("myspan").innerHTML = "newtext";
Редактировать: Это было написано в 2014 году. Многое изменилось. Вероятно, вам уже не важно IE8. Также Firefox теперь поддерживает innerText
.
Если вы сами предоставляете текст и ни одна часть текста не поступает от пользователя (или из другого источника, который вы не контролируете), то установка innerHTML
может быть приемлема:
// * Подходит для жестко заданных текстовых строк, таких как эта, или строк,
// которые вы контролируете.
// * Не подходит для ввода от пользователей или строк, которые вы не контролируете,
// если вы не уверены в своих действиях и предварительно не очистили строку.
document.getElementById('myspan').innerHTML = 'newtext';
Тем не менее, как отмечают другие, если вы не являетесь источником какой-либо части текстовой строки, использование innerHTML
может подвергнуть вас атакам внедрения контента, таким как XSS, если вы не позаботитесь о правильной очистке текста сначала.
Если вы используете ввод от пользователя, вот один из способов сделать это безопасно, сохраняя при этом совместимость между браузерами:
var span = document.getElementById('myspan');
span.innerText = span.textContent = 'newtext';
Firefox не поддерживает innerText
, а IE8 не поддерживает textContent
, поэтому вам нужно использовать оба варианта, если вы хотите сохранить кроссбраузерную совместимость.
И если вы хотите избежать перерасчетов (вызванных innerText
), где это возможно:
var span = document.getElementById('myspan');
if ('textContent' in span) {
span.textContent = 'newtext';
} else {
span.innerText = 'newtext';
}
Для изменения текста внутри элемента с id 'myspan' в JavaScript вы можете использовать следующий код:
document.getElementById('myspan').innerHTML = 'newtext';
Этот код находит элемент на странице с идентификатором 'myspan' и устанавливает его внутренний HTML-код в строку 'newtext'. Убедитесь, что элемент с таким id существует в вашем документе, прежде чем вызывать этот код. Если вы хотите изменить текст без использования HTML-тегов, вы можете использовать textContent
вместо innerHTML
:
document.getElementById('myspan').textContent = 'newtext';
Это более безопасный способ избежать возможных проблем с вставкой HTML-кода.
Если вы используете jQuery
и ничего из предложенного вам не помогло, попробуйте этот вариант, который сработал для меня:
$("#span_id").text("new_value");
Он заменяет текст элемента с идентификатором span_id
на new_value
. Возможно, проблема заключалась в том, что другие методы не были применены корректно или объект не был доступен в тот момент, когда вы пытались изменить его текст.
В дополнение к вышеописанным решениям на чистом JavaScript, вы можете использовать метод jQuery text следующим образом:
$('#myspan').text('newtext');
Если вам нужно расширить ответ и получить или изменить html содержимое элементов span или div, вы можете сделать это так:
$('#mydiv').html('<strong>new text</strong>');
Ссылки:
.text(): http://api.jquery.com/text/
.html(): http://api.jquery.com/html/
Получить координаты (X,Y) HTML-элемента
Прокрутка до низа div?
Потеряно HTML-кодирование при чтении атрибута из поля ввода
Высота, равная динамической ширине (флюидная верстка на CSS)
jQuery/JavaScript: Замена битых изображений