Как изменить текст элемента span в JavaScript

Question

Если у меня есть промежуток, скажите:

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

Как мне использовать JavaScript, чтобы изменить "hereismytext" на "newtext"?

Answer 1

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

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

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

//POSSIBLY INSECURE IF NEWTEXT BECOMES A VARIABLE!!
document.getElementById("myspan").innerHTML="newtext";

Answer 2

Использование innerHTML равно ТАК НЕ РЕКОМЕНДУЕТСЯ . Вместо этого вы должны создать textNode. Таким образом, вы «привязываете» свой текст и, по крайней мере, в этом случае, не уязвимы для атаки XSS.

document.getElementById("myspan").innerHTML = "sometext"; //INSECURE!!

Правильный путь:

span = document.getElementById("myspan");
txt = document.createTextNode("your cool text");
span.appendChild(txt);

Для получения дополнительной информации об этой уязвимости: Межсайтовый скриптинг (XSS) - OWASP

Отредактировано 4 ноября 2017 г .:

Изменена третья строка кода в соответствии с предложением @ mumush : "используйте appendChild (); вместо этого".
Кстати, согласно @ Jimbo Jonny Я думаю, что все должно восприниматься как пользовательский ввод с применением принципа безопасности по слоям. Таким образом, вы не встретите никаких сюрпризов.

Answer 3

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

Answer 4

РЕДАКТИРОВАТЬ: Это было написано в 2014 году. Возможно, вы больше не заботитесь о IE8 и можете забыть об использовании innerText. Просто используйте textContent и покончите с этим, ура.

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

// * Fine for hardcoded text strings like this one or strings you otherwise 
//   control.
// * Not OK for user-supplied input or strings you don't control unless
//   you know what you are doing and have sanitized the string first.
document.getElementById('myspan').innerHTML = 'newtext';

Однако, как отмечают другие, если вы не являетесь источником какой-либо части текстовой строки, использование innerHTML может подвергнуть вас атакам внедрения контента, таким как XSS, если вы не будете осторожны, чтобы сначала правильно очистить текст. 1012 *

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

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';
}

Answer 5

Я использую Jquery и ничего из вышеперечисленного не помогло, я не знаю почему, но это сработало:

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

Answer 6

Вот еще один способ:

var myspan = document.getElementById('myspan');

if (myspan.innerText) {
    myspan.innerText = "newtext";
}
else
if (myspan.textContent) {
        myspan.textContent = "newtext";   
}

Свойство innerText будет обнаружено Safari, Google Chrome и MSIE. Для Firefox стандартным способом работы было использование textContent, но начиная с версии 45 он также имеет свойство innerText, как кто-то любезно сообщил мне недавно. Это решение проверяет, поддерживает ли браузер какое-либо из этих свойств, и, если да, назначает «новый текст».

Демонстрация в реальном времени: здесь

Answer 7

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

Answer 8

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

это выберет dom-узел с идентификатором myspan и изменит текстовое содержимое на new text

Answer 9

За этот промежуток

<span id="name">sdfsdf</span>

Вы можете пойти так: -

$("name").firstChild.nodeValue = "Hello" + "World";

Answer 10

Как и в другом ответе, innerHTML и innerText не рекомендуется, лучше использовать textContent . Этот атрибут хорошо поддерживается, вы можете проверить это так: http://caniuse.com/#search=textContent