Jak zmienić tekst elementu zakresu w JavaScript

Jeśli mam rozpiętość, powiedz:

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

Jak korzystać z JavaScript, aby zmienić „hereismytext” na „newtext”?

W nowoczesnych przeglądarkach powinieneś użyć:

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

Chociaż starsze przeglądarki mogą nie wiedzieć textContent, nie zaleca się korzystania z innerHTMLniego, ponieważ wprowadza on lukę w zabezpieczeniach XSS, gdy nowy tekst jest wprowadzany przez użytkownika (zobacz inne odpowiedzi poniżej, aby uzyskać bardziej szczegółową dyskusję):

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

Korzystanie innerHTML jest SO niezalecane . Zamiast tego powinieneś utworzyć textNode. W ten sposób „wiążesz” swój tekst i nie jesteś, przynajmniej w tym przypadku, podatny na atak XSS.

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

Właściwy sposób:

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

Aby uzyskać więcej informacji o tej usterce: Cross Site Scripting (XSS) - OWASP

Edytowano 4 listopada 2017:

Zmodyfikowano trzeci wiersz kodu zgodnie z sugestią @mumush : „użyj appendChild (); zamiast tego”.
Btw, według @Jimbo Jonny, myślę, że wszystko należy traktować jako wkład użytkownika, stosując zasadę Bezpieczeństwo według warstw. W ten sposób nie spotkasz żadnych niespodzianek.

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

EDYCJA: Zostało to napisane w 2014 roku. Prawdopodobnie nie obchodzi Cię już IE8 i możesz zapomnieć o użyciu innerText. Po prostu użyj textContenti gotowe, hura.

Jeśli to Ty dostarczasz tekst i żadna część tekstu nie jest dostarczana przez użytkownika (lub inne źródło, nad którym nie masz kontroli), ustawienie innerHTMLmoże być dopuszczalne:

// * 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';

Jednak, jak zauważają inni, jeśli nie jesteś źródłem żadnej części ciągu tekstowego, użycie innerHTMLmoże narazić Cię na ataki polegające na wstrzykiwaniu zawartości, takie jak XSS, jeśli nie będziesz ostrożny, aby najpierw odpowiednio zdezynfekować tekst.

Jeśli używasz danych wejściowych od użytkownika, oto jeden ze sposobów, aby to zrobić bezpiecznie, zachowując jednocześnie zgodność z różnymi przeglądarkami:

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

Firefox nie obsługuje, innerTexta IE8 nie obsługuje, textContentwięc musisz użyć obu, jeśli chcesz zachować zgodność z różnymi przeglądarkami.

A jeśli chcesz uniknąć przepływów (spowodowanych przez innerText) tam, gdzie to możliwe:

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

Używam Jqueryi żadne z powyższych nie pomogło, nie wiem dlaczego, ale to zadziałało:

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

Oto inny sposób:

var myspan = document.getElementById('myspan');

if (myspan.innerText) {
    myspan.innerText = "newtext";
}
else
if (myspan.textContent) {
        myspan.textContent = "newtext";   
}

Właściwość innerText zostanie wykryta przez Safari, Google Chrome i MSIE. W przeglądarce Firefox standardowym sposobem działania było użycie textContent, ale od wersji 45 również ma ona właściwość innerText, ponieważ ktoś uprzejmie mnie ostatnio zwrócił na to uwagę. To rozwiązanie sprawdza, czy przeglądarka obsługuje którąkolwiek z tych właściwości, a jeśli tak, przypisuje „newtext”.

Demo na żywo: tutaj

Oprócz powyższych odpowiedzi czystego javascript, możesz użyć metody tekstowej jQuery w następujący sposób:

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

Jeśli potrzebujesz rozszerzyć odpowiedź, aby uzyskać / zmienić zawartość HTML elementów span lub div, możesz to zrobić:

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

Bibliografia:

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

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

Możesz także użyć metody querySelector (), zakładając, że identyfikator „myspan” jest unikalny, ponieważ metoda zwraca pierwszy element z określonym selektorem:

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

developer.mozilla

Podobnie jak w innych odpowiedziach, innerHTML i innerText nie są zalecane, lepiej użyć textContent . Ten atrybut jest dobrze obsługiwany, możesz to sprawdzić: http://caniuse.com/#search=textContent

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

to wybierze dom-node o identyfikatorze myspani zmieni jego treść tekstową nanew text

Możesz to zrobić

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

Do tego zakresu

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

Możesz przejść w ten sposób: -

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