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

388

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

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

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

user105033
источник

Ответы:

636

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

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

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

//POSSIBLY INSECURE IF NEWTEXT BECOMES A VARIABLE!!
document.getElementById("myspan").innerHTML="newtext";
Gregoire
источник
2
@bouncingHippo document.getElementById ("myspan"). setAttribute ("style", "cssvalues");
Грегуар
3
должен быть какой-то способ объединить эти два ответа в один. это точно такой же ответ.
Герман Ингьялдссон
7
Это не устанавливает текст , это устанавливает HTML, который принципиально отличается.
Брэд
22
@gregoire - Как уже отмечали другие, ваш ответ уязвим для XSS. Этот вопрос уже просматривался около 80 тыс. Раз, что означает, что многие люди, вероятно, приняли это решение и могли внести ненужные утечки xss. Не могли бы вы обновить свой ответ, чтобы использовать textContentвместо него, чтобы новые люди поощрялись к использованию правильных и безопасных методов?
Тиддо
2
@Tiddo textContent не поддерживается в IE8 и ниже, и я надеюсь, что вы никогда не будете использовать в своем скрипте напрямую необработанный пользовательский ввод.
Грегуар
75

Использование 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, я думаю, что все должно рассматриваться как пользовательский ввод с применением принципа безопасности по слоям. Таким образом, вы не встретите никаких сюрпризов.

nicooo.
источник
6
Хотя вы абсолютно правы в отношении innerHTMLнеобходимости соблюдать осторожность, обратите внимание, что ваше решение использует то, innerTextчто не поддерживается в Firefox. quirksmode.org/dom/html Он также использует, textContentкоторый не поддерживается в IE8. Вы можете структурировать код, чтобы обойти эти проблемы.
Тротт
4
Используйте span.appendChild(txt);вместо этого!
марта
34
Вопрос ничего не говорит о пользовательском вводе, так что общее утверждение, innerHTMLкоторое не рекомендуется, смешно. Не говоря уже о том, что после дезинфекции все еще в порядке. Идея, что нужно дезинфицировать пользовательский ввод, ТАК НЕ ОТНОСИТСЯ к этому конкретному вопросу. Самое большее, в конце он заслуживает небольшую заметку, в которой говорится: «Кстати, если это пользовательский ввод, сначала обязательно выполните дезинфекцию или используйте метод X, который в этом не нуждается» .
Джимбо Джонни
Кроме того, создание элементов намного быстрее, чем использование innerHTML.
Сэмюэль Рондо-Миллер,
4
Использование appendChild на самом деле не меняет текст, а только добавляет к нему. Используя ваш код здесь, промежуток от исходного вопроса в конечном итоге будет читать «hereismytextyour your text text». Возможно span.innerHTML = "";тогда appendChild?
ShaneSauce
29
document.getElementById('myspan').innerHTML = 'newtext';
Дэн
источник
24

РЕДАКТИРОВАТЬ: Это было написано в 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';
}
Trott
источник
18

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

 $("#span_id").text("new_value");
shellbye
источник
7

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

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

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

slevy1
источник
1
Firefox реализовал поддержку innerText в выпуске 45 .
user3351605 30.09.16
4

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

Мохамед Нагиб
источник
1

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

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

developer.mozilla

Аддис
источник
0

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

Hazlo8
источник
0
document.getElementById("myspan").textContent="newtext";

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

переполнение компании
источник
0

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

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

trustidkid
источник
какая разница с ответом, который я дал?
Аддис
-1

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

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

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

$("name").firstChild.nodeValue = "Hello" + "World";
Дирадж Химани
источник