Як змінити текст елемента "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);

Для отримання додаткової інформації про цю вразливість: Cross Site Scripting (XSS) - OWASP

Відредаговано 4 листопада 2017 року:

Змінено третій рядок коду відповідно до пропозиції @mumush : "замість цього використовувати appendChild ();" Btw
, за словами @Jimbo Jonny, я думаю, що все слід розглядати як вклад користувача, застосовуючи принцип безпеки за шарами. Таким чином ви не зустрінете жодних сюрпризів.

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

EDIT: Це було написано в 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";