Sve što trebate znati o unutarnjem HTML-u u JavaScript-u



Unutarnji HTML u JavaScript-u vrlo je zgodna značajka i široko se koristi za pružanje dinamičnijeg i svestranijeg aspekta web stranicama koje se stvaraju.

JavaScript je jedan od najčešće korištenih programskih jezika. Također je prilično popularan zbog svoje svestranosti na svim platformama. Postoje različita svojstva u koji vam olakšavaju izradu dinamičnog web mjesta. U ovom ćemo članku raspravljati o unutarnjem HTML-u u JavaScript-u u sljedećem slijedu:

Uvod u JavaScript

JavaScript se koristi kao programski jezik na strani klijenta, kao i programski jezik na strani poslužitelja. koristi se za izvršenje na strani klijenta kao i na strani poslužitelja bilo koje aplikacije. Čvor se također može nazvati Node.js na nekoliko mjesta.





Javascript - unutarnji html u javascriptu - edureka

JavaScript nudi mnoštvo metoda za nekoliko funkcionalnosti koje se izvode s lakoćom. To je ono što je JavaScript učinilo jednim od najpopularnijih programskih jezika, ali se također široko koristi u nekoliko vrsta razvoja proizvoda.



pretvoriti binarnu u decimalnu javu

Unutarnji HTML u JavaScript-u

Unutarnji svojstvo u JavaScriptu jedna je od vrlo zgodnih značajki i široko se koristi za pružanje dinamičnijeg i svestranijeg aspekta web stranicama koje se stvaraju.

Ako pokušamo objasniti innerHTML jednostavno, posao unutarnjeg HTML-a je jednostavno učitavanje sadržaja stranice bez osvježavanja cijele stranice. To štedi upotrebu podataka kao i vrijeme iza učitavanja stranice i prilično je lako dobiti. To korisniku daje vrlo brz i reagirajući osjećaj, što čini korisničko iskustvo puno boljim.

Možda zvuči malo teško, ali pokušajmo to razumjeti uz pomoć primjera.



Primjer:

 

Kliknite ovdje da biste promijenili unutarnji HTML tekst.

funkcija myFunction () {document.getElementById ('odlomak1'). innerHTML = 'Stavak promijenjen!' }

Ovdje u gornjem kodu, u oznaci odlomka id koji je paragraf1.

Tamo je funkcija pod nazivom myfunction () koja bi bila opozvana klikom na tekst 'Kliknite ovdje da biste promijenili unutarnji HTML tekst'.Kada se funkcija opozove nakon klika, funkcija se izvršava što kaže getElementById (“odlomak1”), u kojem se navodi da će element s Id-om biti demonstriran.

Nadalje, imamo funkciju innerHTML koja nakon klika jednostavno znači što treba učiniti. Ovdje u gornjem primjeru, to je jednostavno 'Stavak promijenjen'.

Ispod je početni izlaz gornjeg koda.

Ispod je promijenjeni izlaz nakon klika.

Unutarnji HTML s uređenim ili neuređenim popisom

Ispod je primjer za prikaz upotrebe innerHTML-a s uređenim ili neuređenim popisom.

Primjer:

 
  • zdravo
  • bok opet

Kliknite donji gumb da biste dobili sadržaj elementa ul.

Isprobajte funkciju helloFunction () {var x = document.getElementById ('myList'). InnerHTML document.getElementById ('odlomak1'). InnerHTML = x}

Ovdje unutarnji HTML pokreće gumb definiran nazivom 'Probaj'.

Početni izlaz gornjeg teksta je:

Izlaz nakon klika na gumb. Klik na gumb ne dovodi do ponovnog učitavanja stranice, već je to bio rezultat upotrebe innerHTML-a.

InnerHTML za promjenu URL-a

Ispod je još jedan primjer koji prikazuje upotrebu innerHTML-a za promjenu URL-a na klik na gumb.

Primjer:

  Wikipedija Promijeni funkciju veze myFunction () {document.getElementById ('myAnchor'). InnerHTML = 'Google' document.getElementById ('myAnchor'). Href = 'https://www.google.com' document.getElementById ('myAnchor' ) .target = '_blank'}

Gornji primjer u početku daje vezu do web stranice Wikipedije, ali kad se klikne gumb, veza se mijenja na Google.

Postoji nekoliko takvih operacija u kojima innerHTML dobro dođe kada se stranica ne smije ponovno učitati, a samo jedan dio treba ažurirati.To štedi vrijeme, kao i manje napora koji treba uložiti za pristup.Najveća prednost innerHTML-a je korisničko iskustvo koje je poboljšano ovom značajkom.

Pogledajte od Edureke. Obuka za certificiranje web razvoja pomoći će vam naučiti kako stvoriti impresivne web stranice pomoću HTML5, CSS3, Twitter Bootstrap 3, jQuery i Google API-ja i rasporediti ih na Amazon Simple Storage Service (S3).

Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare u 'Spajanje nizova u JavaScript', a mi ćemo vam se javiti.