Jeśli mam rozpiętość, powiedz:
<span id="myspan"> hereismytext </span>
Jak korzystać z JavaScript, aby zmienić „hereismytext” na „newtext”?
javascript
html
użytkownik105033
źródło
źródło
textContent
zamiast tego rozważyć aktualizację swojej odpowiedzi , aby nowe osoby były zachęcane do korzystania z odpowiednich i bezpiecznych metod?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.
Właściwy sposób:
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.
źródło
innerHTML
wymagając ostrożności, pamiętaj, że używasz rozwiązania,innerText
które nie jest obsługiwane w przeglądarce Firefox. quirksmode.org/dom/html Wykorzystuje równieżtextContent
to, co nie jest obsługiwane w IE8. Możesz ustrukturyzować kod, aby obejść te problemy.span.appendChild(txt);
zamiast tego!innerHTML
nie 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” .span.innerHTML = "";
następnie dołączyć dziecko?źródło
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żyjtextContent
i 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
innerHTML
może być dopuszczalne:Jednak, jak zauważają inni, jeśli nie jesteś źródłem żadnej części ciągu tekstowego, użycie
innerHTML
moż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:
Firefox nie obsługuje,
innerText
a IE8 nie obsługuje,textContent
wię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:źródło
Używam
Jquery
i żadne z powyższych nie pomogło, nie wiem dlaczego, ale to zadziałało:źródło
Oto inny sposób:
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
źródło
Oprócz powyższych odpowiedzi czystego javascript, możesz użyć metody tekstowej jQuery w następujący sposób:
Jeśli potrzebujesz rozszerzyć odpowiedź, aby uzyskać / zmienić zawartość HTML elementów span lub div, możesz to zrobić:
Bibliografia:
.text (): http://api.jquery.com/text/
.html (): http://api.jquery.com/html/
źródło
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:
developer.mozilla
źródło
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
źródło
to wybierze dom-node o identyfikatorze
myspan
i zmieni jego treść tekstową nanew text
źródło
Możesz to zrobić
źródło
Do tego zakresu
Możesz przejść w ten sposób: -
źródło