Jak zmienić tekst elementu zakresu w JavaScript

388

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

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

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

użytkownik105033
źródło

Odpowiedzi:

636

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";
Gregoire
źródło
2
@bouncingHippo document.getElementById („myspan”). setAttribute („style”, „cssvalues”);
Gregoire,
3
powinien istnieć sposób na połączenie tych dwóch odpowiedzi w jedną. to jest dokładnie taka sama odpowiedź.
Hermann Ingjaldsson
7
To nie ustawia tekstu , ustawia zasadniczo inny kod HTML .
Brad
22
@gregoire - jak zauważyli już inni, twoja odpowiedź jest podatna na XSS. To pytanie zostało już wyświetlone około 80 000 razy, co oznacza, że ​​wiele osób prawdopodobnie przejęło to rozwiązanie i mogło wprowadzić niepotrzebne wycieki xss. Czy możesz textContentzamiast tego rozważyć aktualizację swojej odpowiedzi , aby nowe osoby były zachęcane do korzystania z odpowiednich i bezpiecznych metod?
Tiddo,
2
@Tiddo textContent nie jest obsługiwany w IE8 i niższych wersjach i mam nadzieję, że nigdy nie użyjesz w skrypcie danych wejściowych odkażonych przez użytkowników.
Gregoire,
75

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.

nicooo.
źródło
6
Chociaż masz całkowitą rację, innerHTMLwymagając ostrożności, pamiętaj, że używasz rozwiązania, innerTextktóre nie jest obsługiwane w przeglądarce Firefox. quirksmode.org/dom/html Wykorzystuje również textContentto, co nie jest obsługiwane w IE8. Możesz ustrukturyzować kod, aby obejść te problemy.
Trott,
4
Użyj span.appendChild(txt);zamiast tego!
mumush,
34
Pytanie nie mówi nic o danych wprowadzanych przez użytkownika, więc ogólna instrukcja, która innerHTMLnie jest zalecana, jest śmieszna. Nie wspominając już o tym, że po odkażeniu nadal jest w porządku. Pomysł, że należy odkażać dane wejściowe użytkownika, NIE JEST ZWIĄZANY Z tym konkretnym pytaniem. Na koniec zasługuje na małą notatkę na końcu, mówiąc: „btw: jeśli jest to dane wejściowe użytkownika, najpierw oczyść lub skorzystaj z metody X, która jej nie potrzebuje” .
Jimbo Jonny
Co więcej, tworzenie elementów jest znacznie szybsze niż przy użyciu innerHTML.
Samuel Rondeau-Millaire
4
Korzystanie z appendChild tak naprawdę nie zmienia tekstu, tylko go dodaje. Używając tutaj kodu, zakres z pierwotnego pytania skończyłby się słowem „hereismytextyour cool text”. Być może span.innerHTML = "";następnie dołączyć dziecko?
ShaneSauce
29
document.getElementById('myspan').innerHTML = 'newtext';
Dan
źródło
24

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';
}
Trott
źródło
18

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

 $("#span_id").text("new_value");
shellbye
źródło
7

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

slevy1
źródło
1
Firefox zaimplementował obsługę innerText w wersji 45 .
user3351605 30.09.16
4

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/

Mohamed Nagieb
źródło
1

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

Addis
źródło
0
document.getElementById("myspan").textContent="newtext";

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

firma przelewowa
źródło
0

Możesz to zrobić

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

trustidkid
źródło
jaka jest różnica w odpowiedzi, której udzieliłem?
Addis,
-1

Do tego zakresu

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

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

$("name").firstChild.nodeValue = "Hello" + "World";
Dhiraj Himani
źródło