Używam zwykłego js do zmiany wewnętrznego tekstu elementu etykiety i nie byłem pewien, na jakiej podstawie powinienem użyć innerHTML, nodeValue lub textContent. Nie muszę tworzyć nowego węzła ani zmieniać elementów HTML ani nic - po prostu zamień tekst. Oto przykład kodu:
var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works
myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.
myLabel.textContent = "Some new label text!"; // this also works.
Przejrzałem źródło jQuery i używa ono nodeValue dokładnie raz, ale innerHTML i textContent kilka razy. Potem znalazłem ten test jsperf, który wskazuje, że firstChild.nodeValue jest znacznie szybszy. Przynajmniej tak to rozumiem.
Jeśli metoda firstChild.nodeValue jest znacznie szybsza, jaki jest haczyk? Czy nie jest szeroko obsługiwany? Czy jest jakiś inny problem?
źródło
nodeValue
nie analizuje też html.textContent
wyjściatext/plain
podczas.innerHTML
wyjśćtext/html
.Szybki przykład:
var example = document.getElementById('exampleId');
example.textContent = '<a href="https://google.com">google</a>';
wyjście: <a href="http://google.com"> google </a>
example.innerHTML = '<a href="https://google.com">google</a>';
wyjście: google
W pierwszym przykładzie widać, że dane wyjściowe typu
text/plain
nie są analizowane przez przeglądarkę i powodują wyświetlenie pełnej treści. Dane wyjściowe typutext/html
informują przeglądarkę o przeanalizowaniu go przed wyświetleniem.MDN innerHTML , MDN textContent , MDN nodeValue
źródło
Dwa, które dobrze znam i z którymi pracuję, to innerHTML i textContent .
Używam textContent, gdy chcę tylko zmienić tekst akapitu lub nagłówka w następujący sposób:
var heading = document.getElementById('heading') var paragraph = document.getElementById('paragraph') setTimeout(function () { heading.textContent = 'My New Title!' paragraph.textContent = 'My second <em>six word</em> story.' }, 2000)
em { font-style: italic; }
<h1 id="heading">My Title</h1> <p id="paragraph">My six word story right here.</p>
Tak więc textContent po prostu zmienia tekst, ale nie analizuje kodu HTML, co możemy stwierdzić na podstawie znaczników widocznych w postaci zwykłego tekstu w wyniku.
Jeśli chcemy analizować HTML, używamy innerHTML w następujący sposób:
var heading = document.getElementById('heading') var paragraph = document.getElementById('paragraph') setTimeout(function () { heading.innerHTML = 'My <em>New</em> Title!' paragraph.innerHTML = 'My second <em>six word</em> story.' }, 2000)
em { font-style: italic; }
<h1 id="heading">My Title</h1> <p id="paragraph">My six word story right here.</p>
Zatem w tym drugim przykładzie ciąg, który przypisuję do właściwości innerHTML elementu DOM jako HTML.
To jest niesamowite i duża luka w zabezpieczeniach:)
(poszukaj XSS, jeśli chcesz wiedzieć o bezpieczeństwie)
źródło
innerText jest mniej więcej tym, co uzyskasz, jeśli zaznaczysz tekst i skopiujesz go. Elementy, które nie są renderowane, nie są obecne w innerText.
textContent jest połączeniem wartości wszystkich TextNodes w poddrzewie. Czy renderowane czy nie.
Oto świetny post opisujący różnice
InternalHTML nie powinien być uwzględniany w porównaniu z innerText lub textContent, ponieważ jest zupełnie inny i naprawdę powinieneś wiedzieć dlaczego :-) Sprawdź to osobno
źródło
[Uwaga: ten post dotyczy bardziej udostępniania konkretnych danych, które mogą komuś pomóc, niż mówienia innym, co mają robić]
Gdyby ktoś się zastanawiał, co jest dziś najszybsze: https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent ( dla drugiego testu zawartość przęsła to zwykły tekst, wyniki mogą się zmieniać w zależności od jego zawartości)
Wygląda na
.innerHtml
to, że jest to wielki zwycięzca pod względem czystej prędkości!(UWAGA: mówię tutaj tylko o szybkości, możesz chcieć poszukać innych kryteriów, zanim wybierzesz, którego użyć!)
źródło
Element.innerHTML do
set
lubget
kod HTML elementu.Np. Mamy z tym
<h1>
tag i mocny styl:<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1>
Abyget
zawartość elementu miała identyfikator równy „myHeader”, zrobimy to samo:var element = document.getElementById("myHeader"); element.innerHTML
Wynik zwrotu:
<strong>My Header</strong> Normal Text`
Aby „ustawić” nową zawartość (wartość) dla tego elementu, kod będzie tutaj:
Element.innerHTML = "My Header My Text";
Więc ta właściwość działa nie tylko ze zwykłym tekstem, ale ma na celu przekazywanie lub kopiowanie kodu HTML.
=> Nie powinniśmy go używać.
Jednak wielu programistów (w tym ja) używa tego atrybutu do wstawiania tekstu na stronę internetową, a ta metoda niesie ze sobą potencjalne ryzyko:
Z tego powodu
innerHTML
nie zaleca się używania przy wstawianiu zwykłego tekstu, zamiast tego użyjtextContent
.textContent
Nieruchomość nie zrozumie, że kod można przejść jest składnia HTML, ale tylko tekst 100% nie więcej i nie mniej.Wynik zostanie zwrócony, jeśli użyjesz
textContent
w powyższym przykładzie:źródło