Tot ce trebuie să știți despre HTML interior în JavaScript

JavaScript este unul dintre cele mai utilizate limbaje de programare. Este, de asemenea, destul de popular pentru versatilitatea sa pe platforme. Există diferite proprietăți în care vă ușurează munca de construire a unui site web dinamic. În acest articol, vom discuta HTML-ul interior în JavaScript în următoarea secvență:

• Introducere în JavaScript
• HTML interior în JavaScript
  • Listă ordonată sau neordonată
  • Schimbarea adresei URL

Introducere în JavaScript

JavaScript este utilizat ca limbaj de programare atât pentru client cât și pentru limbaj de programare pentru server. este folosit pentru a executa atât din partea clientului, cât și din partea serverului oricărei aplicații. Un nod poate fi denumit și Node.js în mai multe locuri.

JavaScript oferă o mulțime de metode pentru mai multe funcționalități care trebuie efectuate cu ușurință. Aceasta a făcut din JavaScript unul dintre cele mai populare limbaje de programare, precum și este utilizat pe scară largă în mai multe tipuri de dezvoltare a produselor.

HTML interior în JavaScript

Interiorul proprietatea în JavaScript este una dintre caracteristicile foarte utile și este utilizată pe scară largă pentru a oferi un aspect mai dinamic și mai versatil paginilor web create.

Dacă încercăm să explicăm HTML interioară pur și simplu, atunci munca făcută de innerHTML este pur și simplu să încărcăm conținutul paginii fără a actualiza întreaga pagină. Acest lucru salvează utilizările de date, precum și timpul din spatele încărcării paginii și este destul de ușor de câștigat. Acest lucru oferă utilizatorului o senzație foarte rapidă și receptivă, îmbunătățind astfel experiența utilizatorului.

Poate suna puțin dificil, dar să încercăm să înțelegem acest lucru cu ajutorul unui exemplu.

cum se utilizează tostring în java

Exemplu:

 
Faceți clic aici pentru a modifica textul HTML interioară.
function myFunction () {document.getElementById ('paragraful1'). innerHTML = 'Paragraful schimbat!' }

Aici, în codul de mai sus, în eticheta de paragraf, ID-ul acestuia este paragraful 1.

Este un funcţie numit funcția mea () care ar fi revocată la clicul pe textul „Faceți clic aici pentru a modifica textul innerHTML”.Când funcția este revocată la clic, se execută funcția care spune getElementById („paragraful1”), în care se specifică elementul cu ID-ul ca demo.

Mai mult, avem funcția HTML interioară, care înseamnă pur și simplu după ce faceți clic ce trebuie făcut. Aici, în exemplul de mai sus, este pur și simplu „Paragraful modificat”.

Mai jos este ieșirea inițială a codului de mai sus.

Mai jos este rezultatul modificat după clic.

HTML interior cu listă ordonată sau neordonată

Mai jos este un exemplu pentru a arăta utilizarea innerHTML cu o listă ordonată sau neordonată.

Exemplu:

 
 
Buna ziua
 
buna din nou
 
 
Faceți clic pe butonul de mai jos pentru a obține conținutul elementului ul.
Încercați funcția helloFunction () {var x = document.getElementById ('lista mea'). InnerHTML document.getElementById ('paragraful1'). InnerHTML = x}

Aici innerHTML este declanșat de butonul definit de numele „Încercați”.

Ieșirea inițială a textului de mai sus este:

Ieșirea după clic pe buton. Clicul pe buton nu duce la reîncărcarea paginii, ci s-a datorat utilizării innerHTML.

InnerHTML pentru modificarea adresei URL

Mai jos este un alt exemplu care arată utilizarea innerHTML pentru modificarea adresei URL cu un clic pe buton.

Exemplu:

  Wikipedia Schimbați funcția de legătură myFunction () {document.getElementById ('myAnchor'). InnerHTML = 'Google' document.getElementById ('myAnchor'). Href = 'https://www.google.com' document.getElementById ('myAnchor' ) .target = '_blank'}

Exemplul de mai sus oferă inițial linkul către site-ul Wikipedia, dar când se face clic pe buton, linkul se schimbă în Google.

Există mai multe astfel de operații în care innerHTML vine la îndemână atunci când pagina nu trebuie reîncărcată și doar o parte trebuie actualizată.Acest lucru economisește timp, precum și mai puține eforturi, trebuie făcute pentru abordare.Cel mai mare avantaj al innerHTML este experiența utilizatorului, care este îmbunătățită cu această caracteristică.

Verificați de Edureka. Instruirea pentru certificarea dezvoltării web vă va ajuta să aflați cum să creați site-uri web impresionante folosind HTML5, CSS3, Twitter Bootstrap 3, jQuery și API-urile Google și să îl implementați în Amazon Simple Storage Service (S3).

Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii din „Concatenarea șirurilor în JavaScript” și vă vom răspunde.