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

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

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

Как я могу использовать JavaScript, чтобы изменить «hereismytext» на «newtext»?

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

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

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

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

Использование innerHTML является SO НЕ РЕКОМЕНДУЕТСЯ . Вместо этого вы должны создать 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, я думаю, что все должно рассматриваться как пользовательский ввод с применением принципа безопасности по слоям. Таким образом, вы не встретите никаких сюрпризов.

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

РЕДАКТИРОВАТЬ: Это было написано в 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, если вы не будете осторожны, чтобы сначала правильно очистить текст.

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

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

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

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

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

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, как кто-то любезно сообщил мне недавно. Это решение проверяет, поддерживает ли браузер какое-либо из этих свойств, и, если да, назначает «новый текст».

Живая демоверсия: здесь

В дополнение к приведенным выше ответам на языке javascript вы можете использовать текстовый метод jQuery следующим образом:

$('#myspan').text('newtext');

Если вам нужно расширить ответ, чтобы получить / изменить HTML- содержимое элементов span или div, вы можете сделать это:

$('#mydiv').html('<strong>new text</strong>');

Ссылки:

.text (): http://api.jquery.com/text/

.html (): http://api.jquery.com/html/

Вы также можете использовать метод querySelector (), предполагая, что идентификатор «myspan» уникален, так как метод возвращает первый элемент с указанным селектором:

document.querySelector('#myspan').textContent = 'newtext';

developer.mozilla

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

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

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

Ты можешь сделать

 document.querySelector ("[Span]"). textContent = "content_to_display"; 

Для этого промежутка

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

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

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