Wszystko, co musisz wiedzieć o wewnętrznym HTML w JavaScript

JavaScript jest jednym z najczęściej używanych języków programowania. Jest również dość popularny ze względu na swoją wszechstronność na różnych platformach. W programie są różne właściwości które ułatwiają tworzenie dynamicznej witryny internetowej. W tym artykule omówimy wewnętrzny kod HTML w JavaScript w następującej kolejności:

• Wprowadzenie do JavaScript
• Wewnętrzny HTML w JavaScript
  • Lista uporządkowana lub nieuporządkowana
  • Zmiana adresu URL

Wprowadzenie do JavaScript

JavaScript jest używany jako język programowania po stronie klienta, a także język programowania po stronie serwera. służy do wykonania zarówno po stronie klienta, jak i serwera dowolnej aplikacji. W kilku miejscach węzeł może być również określany jako Node.js.

JavaScript zapewnia mnóstwo metod łatwego wykonywania kilku funkcji. To właśnie sprawiło, że JavaScript stał się jednym z najpopularniejszych języków programowania, a także jest szeroko stosowany w kilku rodzajach rozwoju produktów.

Wewnętrzny HTML w JavaScript

Wewnętrzny właściwość JavaScript jest jedną z bardzo przydatnych funkcji i jest szeroko stosowana w celu zapewnienia bardziej dynamicznego i wszechstronnego aspektu tworzonych stron internetowych.

Jeśli spróbujemy po prostu wyjaśnić wewnętrzny kod HTML, praca wykonana przez innerHTML polega po prostu na załadowaniu zawartości strony bez odświeżania całej strony. Oszczędza to wykorzystanie danych, a także czas ładowania strony i jest dość łatwe do uzyskania. Daje to użytkownikowi bardzo szybkie i responsywne odczucia, dzięki czemu korzystanie z niego jest znacznie lepsze.

Może się to wydawać trochę trudne, ale spróbujmy to zrozumieć na przykładzie.

Przykład:

 
Kliknij tutaj, aby zmienić tekst innerHTML.
function myFunction () {document.getElementById ('paragraph1'). innerHTML = 'Akapit zmieniony!' }

Tutaj w powyższym kodzie, w tagu akapitu id jest akapit pierwszy.

połączony program listy w c

Tam jest funkcjonować o nazwie myfunction (), która zostanie odwołana po kliknięciu tekstu „Kliknij tutaj, aby zmienić wewnętrzny tekst HTML”.Kiedy funkcja zostaje odwołana po kliknięciu, zostaje wykonana funkcja, która mówi getElementById („paragraph1”), która określa, że ​​element z Id jako demo ma zostać wybrany.

Ponadto mamy funkcję innerHTML, która po kliknięciu oznacza, co należy zrobić. W powyższym przykładzie jest to po prostu „Zmieniono akapit”.

Poniżej znajduje się początkowe wyjście powyższego kodu.

Poniżej znajduje się zmieniony wynik po kliknięciu.

co to jest wielokrotne dziedziczenie w java

Wewnętrzny kod HTML z listą uporządkowaną lub nieuporządkowaną

Poniżej znajduje się przykład pokazujący użycie innerHTML z listą uporządkowaną lub nieuporządkowaną.

Przykład:

 
 
cześć
 
Witam ponownie
 
 
Kliknij poniższy przycisk, aby pobrać zawartość elementu ul.
Wypróbuj funkcję helloFunction () {var x = document.getElementById ('myList'). InnerHTML document.getElementById ('paragraph1'). InnerHTML = x}

Tutaj innerHTML jest uruchamiany przez przycisk zdefiniowany nazwą „Wypróbuj”.

Początkowy wynik powyższego tekstu to:

Wyjście po kliknięciu przycisku. Kliknięcie przycisku nie prowadzi do ponownego załadowania strony, ale zamiast tego było spowodowane użyciem innerHTML.

jak zrobić zagnieżdżone tabele w html

InnerHTML do zmiany adresu URL

Poniżej znajduje się kolejny przykład pokazujący użycie innerHTML do zmiany adresu URL po kliknięciu przycisku.

Przykład:

  Wikipedia Zmień funkcję linku myFunction () {document.getElementById ('myAnchor'). InnerHTML = 'Google' document.getElementById ('myAnchor'). Href = 'https://www.google.com' document.getElementById ('myAnchor' ) .target = '_blank'}

Powyższy przykład początkowo podaje link do strony Wikipedii, ale po kliknięciu przycisku łącze zmienia się na Google.

Jest kilka takich operacji, w których innerHTML przydaje się, gdy strona nie ma być ponownie ładowana i tylko część ma zostać zaktualizowana.Oszczędza to czas, a także mniej wysiłku, który należy włożyć w to podejście.Największą zaletą innerHTML jest wygoda użytkownika, która jest ulepszona dzięki tej funkcji.

Sprawdź przez Edureka. Szkolenie w zakresie certyfikacji w zakresie rozwoju sieci pomoże Ci nauczyć się, jak tworzyć imponujące witryny internetowe przy użyciu HTML5, CSS3, Twitter Bootstrap 3, jQuery i interfejsów API Google oraz wdrażać je w Amazon Simple Storage Service (S3).

Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy w sekcji „Łączenie ciągów w JavaScript”, a my skontaktujemy się z Tobą.