Как изменить текст двускатной элемента в JavaScript

Question

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

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

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

Answer 1

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

EDIT Для современных браузеров:

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

Answer 2

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

Answer 3

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

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

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

Answer 4

Если вы один подачи текста и никакая часть текста поставляется пользователем (или какой-либо другой источник, который вы не контролируете), то установка 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'; 
} 

Answer 5

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

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

Живая демонстрация: here

Answer 6

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

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

Answer 7

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

Answer 8

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

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

Вы можете идти, как это: -

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