5

Как изменить текст элемента с помощью JavaScript?

13

Вопрос: Как изменить текст в элементе <span> с помощью JavaScript?

У меня есть элемент <span>, например:

<span id="myspan"> hereismytext </span>

Как я могу с помощью JavaScript заменить текст "hereismytext" на "newtext"?

5 ответ(ов)

9

Для современных браузеров следует использовать:

document.getElementById("myspan").textContent = "newtext";

Хотя более старые браузеры могут не поддерживать textContent, не рекомендуется использовать innerHTML, так как это может привести к уязвимости XSS, если новый текст вводится пользователем (см. другие ответы ниже для более подробного обсуждения):

// ВОЗМОЖНО, НЕНАДЕЖНО, ЕСЛИ NEWTEXT СТАНОВИТСЯ ПЕРЕМЕННОЙ!!
document.getElementById("myspan").innerHTML = "newtext";
0

Редактировать: Это было написано в 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';
}
0

Для изменения текста внутри элемента с id 'myspan' в JavaScript вы можете использовать следующий код:

document.getElementById('myspan').innerHTML = 'newtext';

Этот код находит элемент на странице с идентификатором 'myspan' и устанавливает его внутренний HTML-код в строку 'newtext'. Убедитесь, что элемент с таким id существует в вашем документе, прежде чем вызывать этот код. Если вы хотите изменить текст без использования HTML-тегов, вы можете использовать textContent вместо innerHTML:

document.getElementById('myspan').textContent = 'newtext';

Это более безопасный способ избежать возможных проблем с вставкой HTML-кода.

0

Если вы используете jQuery и ничего из предложенного вам не помогло, попробуйте этот вариант, который сработал для меня:

$("#span_id").text("new_value");

Он заменяет текст элемента с идентификатором span_id на new_value. Возможно, проблема заключалась в том, что другие методы не были применены корректно или объект не был доступен в тот момент, когда вы пытались изменить его текст.

0

В дополнение к вышеописанным решениям на чистом 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/

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь