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

Ответ 1

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

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

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

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

Ответ 2

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

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

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

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

Дополнительные сведения об этой уязвимости: Cross Site Scripting (XSS) - OWASP

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

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

Ответ 3

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

Ответ 4

EDIT: Это было написано в 2014 году. Вероятно, вы больше не заботитесь о IE8 и можете забыть об использовании innerText. Просто используйте textContent и 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 может подвергать вас атакам, связанным с innerHTML контента, например, XSS, если вы не будете осторожны, чтобы сначала дезинформировать текст.

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

var span = document.getElementById('myspan');
span.innerText = span.textContent = 'newtext';

Firefox не поддерживает innerText и IE8 не поддерживает textContent поэтому вам нужно использовать оба textContent если вы хотите поддерживать совместимость между браузерами.

И если вы хотите избежать переплавов (вызванных innerText), где это возможно:

var span = document.getElementById('myspan');
if ('textContent' in span) {
    span.textContent = 'newtext';
} else {
    span.innerText = 'newtext';
}

Ответ 5

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

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

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

Демо-версия: здесь

Ответ 7

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

Ответ 8

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

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

developer.mozilla

Ответ 9

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

Ответ 10

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

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

Ответ 11

Вы можете сделать

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

Ответ 12

Для этого диапазона

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

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

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